Webpack can sometimes take a long time to build a package. Here is a solution to make it silky and smooth

1. Introduction

When it comes to Webpack, there are two solutions for infrequently updated third-party libraries like React, LoDash, and Vue that we want to keep separate from our own code

  • CommonsChunkPlugin
  • DLLPlugin

For CommonsChunkPlugin, webPack still has to deal with these third-party libraries every time it is packaged, but once it is packaged, it can separate the third-party libraries from our own code. DLLPlugin, on the other hand, can completely separate third-party code, packaging only the project’s own code at a time. Dll this concept is borrowed from Windows SYSTEM Dll, a Dll package, is a pure dependent library, it cannot run itself, is used for your app reference.

2. Template webpack-simple usage

To use the DLLPlugin, you need to create an additional configuration file. So for projects packaged in this way, there are typically two configuration files

  • webpack.config.js
  • webpack.dll.config.js

Create a new file in the project root directory, webpack.dll.config.js

const path    = require('path');
const webpack = require('webpack');
module.exports = {
  entry: {
      vendor: ['vue-router'.'vuex'.'vue/dist/vue.common.js'.'vue/dist/vue.js'.'vue-loader/lib/component-normalizer.js'.'vue']},output: {
    path: path.resolve('./dist'),
    filename: '[name].dll.js'.library: '[name]_library'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.resolve('./dist'.'[name]-manifest.json'),
      name: '[name]_library'}})];Copy the code

This is to add the third-party plug-in used to the vendor. Then add the code to webpack.config.js

plugins: [
    new webpack.DllReferencePlugin({
      manifest: require('./dist/vendor-manifest.json')})]Copy the code

**

Then add the shortcut command (build: DLL) to the package.json file

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
    "build:dll": "webpack --config webpack.dll.config.js"
  },
Copy the code

At the end of packaging, run the NPM run build: DLL command to generate vendor-manifest.json and vendor.dll.js files in the package directory. When packing DLLS, Webpack will make an index of all contained libraries, written in a manifest file, and the code that references the DLL (DLL user) when packing, just need to read the manifest file, can do.

After NPM run build is executed, it is found that the webpack speed is about 2 or 3 seconds, much faster than the previous 20 seconds.

3. Template Webpack usage

Create webpack.dll.config.js under build

Content:

const path = require('path')
const webpack = require('webpack')
module.exports = {
  entry: {
    vendor: [
      'vue-router'.'vuex'.'vue/dist/vue.common.js'.'vue/dist/vue.js'.'vue-loader/lib/component-normalizer.js'.'vue'.'axios'.'echarts']},output: {
    path: path.resolve('./dist'),
    filename: '[name].dll.js'.library: '[name]_library'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.resolve('./dist'.'[name]-manifest.json'),
      name: '[name]_library'
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false}}})]Copy the code

It is recommended to add code compression plug-in, otherwise the DLL package will be relatively large.

Add the configuration after the plugin in webpack.prod.conf.js

new webpack.DllReferencePlugin({
    manifest: require('.. /dist/vendor-manifest.json')})Copy the code

Package. The json quick to join in the script command “build: DLL” : “webpack – config build/webpack. DLL. Config. Js.” “

To generate a DLL, run NPM run build: DLL to generate two files in the dist directory, vender-manifest.json and vender.dll.js. It then formally generates prod NPM run Build :prod, which generates packaging files other than those specified in webpack.dll.config.js.

When we tried to introduce the DllPlugin in vue-element-admin, we added 20 package items.

Packaging time after introduction of DllPlugin:

You can see that the packing time is greatly shortened

4. Another method is externals option

You can also use externals to unpack a part of webpack, import JS files from the CDN elsewhere, and use caching to download CDN files to reduce the packaging time. Configure externals:

Module. exports = {externals: {'vue': 'window.vue ', 'vuex': 'window.Vuex', 'vue-router': 'window.VueRouter' ... }} // After externals is configured, webpack does not pack the code in the configuration item. // HTML <body> <script SRC ="XXX/ CDN /vue.min.js"></script>...... </body>Copy the code

Online posts are mostly different in depth, even some inconsistent, the following article is a summary of the learning process, if you find mistakes, welcome to comment out ~

Reference:

  1. Webpack DLL usage
  2. Using webpack. DllPlugin and webpack. DllReferencePlugin webpack packaging slow problem
  3. Webpack document
  4. DLL functionality for Webpack

PS: Welcome to pay attention to my official account [front-end afternoon tea], come on together

In addition, you can join the “front-end afternoon tea Exchange Group” wechat group, long press to identify the following TWO-DIMENSIONAL code to add my friend, remarks add group, I pull you into the group ~