liximomo / lazy-compile-webpack-plugin

Boost webpack startup time by lazily compiling dynamic imports

Lazy Compile Webpack Plugin

Plugin that saves a tremendous amount of time.

Why

Starting the development server is taking you a long time when the codebase is large. You have tried dynamic imports, it only does a load-on-demand, the whole project was still been compiled. We don't want to wait a couple of minutes for a simple modification. People don't waste time for the things they have never used!

Install

# npm
npm i -D lazy-compile-webpack-plugin

# yarn
yarn add -D lazy-compile-webpack-plugin

Usage

const LazyCompilePlugin = require('lazy-compile-webpack-plugin');

module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },
  plugins: [new LazyCompilePlugin()],
};

Options

Name	Type	Default	Description
refreshAfterCompile	boolean	false	Enable/Disable page refresh when compilation is finish
ignores	RegExp[] | Function[]	undefined	Request to be ignored from lazy compiler

refreshAfterCompile

Type: boolean Default: false

Set false for a seamless dev experience.

ignores

Type: RegExp[] | ((request: string, wpModule: object) => boolean) Default: undefined

Request to be ignored from lazy compiler, html-webpack-plugin is always ignored.

Specifically, an Angular app should enable this option like following:

new LazyCompileWebpackPlugin({
  ignores: [
    /\b(html|raw|to-string)-loader\b/,
    /\bexports-loader[^?]*\?exports\.toString\(\)/
  ],
});

lazy-compile-webpack-plugin's Issues

ReferenceError: document is not defined

ERROR in   Error: webpack-internal:///./node_modules/lazy-compile-webpack-plugin/lib/loaders/api.js:22
  var originTitle = document.title;
                    ^
  ReferenceError: document is not defined
  
  - api.js:22 eval
    [.]/[lazy-compile-webpack-plugin]/lib/loaders/api.js:22:19
  
  - index.pug:108 Object../node_modules/lazy-compile-webpack-plugin/lib/loaders/api.js
    /Users/JounQin/Workspaces/GitHub/pkgr/packages/webpack/index.pug:108:1
  
  - index.pug:21 __webpack_require__
    /Users/JounQin/Workspaces/GitHub/pkgr/packages/webpack/index.pug:21:30
  
  - index.pug:3 eval
    [.]/[html-webpack-plugin]/lib/loader.js!./packages/webpack/index.pug:3:11
  
  - index.pug:97 Object../node_modules/html-webpack-plugin/lib/loader.js!./packages/webpack/index.pug
    /Users/JounQin/Workspaces/GitHub/pkgr/packages/webpack/index.pug:97:1
  
  - index.pug:21 __webpack_require__
    /Users/JounQin/Workspaces/GitHub/pkgr/packages/webpack/index.pug:21:30
  
  - index.pug:85 
    /Users/JounQin/Workspaces/GitHub/pkgr/packages/webpack/index.pug:85:18
  
  - index.pug:88 
    /Users/JounQin/Workspaces/GitHub/pkgr/packages/webpack/index.pug:88:10
  
  - index.js:247 HtmlWebpackPlugin.evaluateCompilationResult
    [pkgr]/[html-webpack-plugin]/index.js:247:28

Lazy compile with storybook preset causes double build on initialization

With a brand new storybook, adding lazy-compile-webpack-plugin causes webpack to potentially build a few times.

I have successfully duplicated the bug in the repository:
https://github.com/devtreehouse/StorybookLazyCompile
(This is using webpack 4 and above)

To start the app, clone the repo, do yarn, and then yarn storybook. Once webpage starts, observe console.
Sometimes the build only does once, sometimes it does twice or even 3 times.

One time:

Three times:

In our production repo, one build takes 2 minutes, so... rebuilding means waiting for 2 more minutes randomly, that means it defeats the purpose of saving time on lazy compile.

Additional context:
In our main app, I realized that on the second build, it goes and try to do a full build, that means all react suspense (code splitted) code will be built. But it doesn't happen on the first time.
Also I noticed the first build is not success, as some images on our webpage are not being displayed. I think it might be webpack trying to make up for it, but it never happens without this plugin enabled.

Would greatly appreciate it if you can take a look. I really want to use this in our official dev environment. I am also personally trying to learn webpack plugin to help

Support multi-page app by marking html-webpack-plugin entries as lazy

Currently, this plugin only deals with dynamic imports, but in real life, a common cause of slow compilation is huge multi-page apps (an example app: https://github.com/GodStream/multi-vue-cli3.0-bug).
By adding html-webpack-plguin entries to the lazyModules list, there will be great improvement to those apps. And this feature seems quite in line with this plugin's goal.

fix apiPath on Windows system.

A Windows path problem.
#L3
It should be apiPath.replace(/\\/ig,'\\\\').Otherwise,the program will transform E:\code\app.js into E:codeapp.js at line 11 because of the template code.
Just make a judgement it'll run ok!

Look at th pr.

The compatible path on windows system.

Originally posted by @liximomo in #10 (comment)

---

Webpack use eval to exceute your template code.
So the result maybe for the following code.

const p = path.win32.join('e:','a.js'); // e:\\a.js
const template = `var api = '${p}'`; // var api = \'e\\a.js\'

// use eval excute template on browser

eval(template);

console.log(api) // e:a.js

This exception caught on browser because of the eval function that webpack use.

Fallback element with `React.lazy`

webpack3会报错呢

Lazy compile with storybook preset causes double build on initialization

I tried to do react lazy with storybook 5.x preset, and use lazy compile webpack plugin. The result is flaky.
Sometime it build once, and works (20% of the time), other times it will finish lazy build, and immediately initiate another build.
Aside from default storybook webpack preset, we are using ts-loader and a bunch of other loaders, we are not using any additional plugins though.

It seems like on the second build, it's trying to build all React.Lazy bundles.

In our story files, we did something like

stories.add('StoryName', () => (<Suspense fallback={</>}><LazyLoadedContent/></Suspense>)

Any idea why this might be happening?

Cannot read property 'beforeCompile' of undefined

Version:

"webpack": "^3.6.0",
node: v8.11.1

Problem:

it can't run when using this plugin

Reason:

TypeError: Cannot read property 'beforeCompile' of undefined
at LazyCompilePlugin.apply (D:\lunkr-project\hxphone-main-stable\node_modules\lazy-compile-webpack-plugin\lib\plugin.js:57:20)
at Compiler.apply (D:\lunkr-project\hxphone-main-stable\node_modules\tapable\lib\Tapable.js:375:16)
at webpack (D:\lunkr-project\hxphone-main-stable\node_modules\webpack\lib\webpack.js:33:19)
at startDevServer (D:\lunkr-project\hxphone-main-stable\node_modules\webpack-dev-server\bin\webpack-dev-server.js:367:16)
at processOptions (D:\lunkr-project\hxphone-main-stable\node_modules\webpack-dev-server\bin\webpack-dev-server.js:350:5)
at
at process._tickCallback (internal/process/next_tick.js:188:7)
at Function.Module.runMain (module.js:695:11)
at startup (bootstrap_node.js:188:16)
at bootstrap_node.js:609:3

Webpack 5 support

Does this module support Webpack 5?
If not, are there plans to introduce it?