VUE-CLI Webpack2 Project Packaging optimization

Reduce file search Scope configuration Resolve.modules

Webpack resolve.modules Configuration Module library (that is, node_modules) in the location, in the JS is import ‘vue‘ not relative, not the absolute path of the writing, will go to node_modules the directory to find. However, the default configuration will be searched by recursive search, but usually only one in the project directory, node_modules and in the project root directory, in order to reduce the scope of the search, can be directly stated node_modules in the full path, also for the alias (' Alias) configuration, also when:

function Resolve(dir){  return Path.Join(__dirname, ' ... ',Dir}Module.exports = {  Resolve: {    Extensions:['. js ', '. Vue ', '. JSON '],    Modules:[Resolve(' src '),      Resolve(' Node_modules ')    ],    alias: {      ' vue$ ': ' Vue/dist/vue.common.js ',      ' src ': Resolve(' src '),      ' Assets ': Resolve(' Src/assets '),      ' components ': Resolve(' src/components '),      // ...      ' Store ': Resolve(' Src/store ')}  },...}

Reasonable Setup Test & include & Exclude

Test: Conditions that must be met (regular expressions, no quotes, matching files to be processed)
Exclude: Conditions that cannot be met (exclude directories that are not processed)
Include: The imported file will be converted by the loader by the path or array of files (include the directory to be processed)

This reduces the loss of performance by reducing unnecessary traversal.

Replace Code compression Tool

Webpack default provided by the UGLIFYJS plug-in, due to the use of single-thread compression, slow;

Webpack-parallel-uglify-plugin plug-ins can run UGLIFYJS plug-ins in parallel, more adequate and reasonable use of CPU resources, which can greatly reduce the build time;

Of course, the plug-in is applied to the production environment and not the development environment, after installing the plug-in, the following configuration:

//Delete the Uglifyjs plugin provided by Webpack//New Webpack.optimize.UglifyJsPlugin ({//compress: {//Warnings:false,//Drop_console:true//   },//Sourcemap:true// }),//Add Webpack-parallel-uglify-plugin to replaceConstParalleluglifyplugin= require(' Webpack-parallel-uglify-plugin ');New Paralleluglifyplugin({  Cachedir: '. cache/',   //Set cache path, do not change the call cache, and speed up the second and subsequent build  Uglifyjs:{    Output: {      Comments: false    },    Compress: {      Warnings: false    }  }})

Also tried the same type plug-in Webpack-uglify-parallel, but not webpack-parallel-uglify-plugin good (may vary depending on the project, in the project can be used in comparison).
The Webpack-parallel-uglify-plugin plug-in is slightly larger (but not obvious) compared to the uglifyjsplugin of the package, and I chose the pursuit speed (I dropped from 40 to 19 seconds after use).

copying static files

Use copy-webpack-plugin plug-ins: Copy the files under the specified folder to the specified directory, with the following configuration:

var=require(‘copy-webpack-plugin‘)plugins: [  ...  // copy custom static assets  newCopyWebpackPlugin([    {      from:path.resolve(__dirname,‘../static‘),      to:config.build.assetsSubDirectory,      ignore: [‘.*‘]    }  ])]

Dllplugin & Dllreferenceplugin

DLL This concept should be borrowed from the Windows system DLL. A DLL package is a purely dependent library that cannot run itself and is used to refer to your app.

When you package a DLL, Webpack will make an index of all the contained libraries, write them in a manifest file, and the code that references the DLL (DLL user) is only required to read the manifest file when it is packaged.

One, add the file Webpack.dll.conf.js under the Project Build folder, the content is as follows

varPath= require(' path ')varWebpack= require(' Webpack ')Module.exports = {  entry: {    Vendor:[//Fill in the required libraries here      ' Babel-polyfill ',      ' Axios ',      ' Vue/dist/vue.common.js ',      ' Vue-router ',      ' Pingpp-js ',      "Region-picker"]},  Output: {    Path: Path.Resolve(__dirname, '. /static/js '),    filename: ' [name].dll.js ',    Library: ' [name]_library '  },  Module: {    rules:[{        Test: /\.Vue$/,        Loader: ' Vue-loader '      },      {        Test: /\.JS$/,        Loader: ' Babel-loader ',        Exclude: /node_modules/      }]},  Plugins:[New Webpack.optimize.Moduleconcatenationplugin(),    New Webpack.Dllplugin({      Path: Path.Join(__dirname, '. ', ' [Name]-manifest.json '),      Librarytarget: ' Commonjs2 ',      name: ' [name]_library '    }),    New Webpack.optimize.Uglifyjsplugin({      Compress: {        Warnings: false      }    })  ]}

Second, in the Webpack.prod.conf.js file add-ons section:

plugins: [  ...  // copy custom static assets    newwebpack.DllReferencePlugin({       context:path.resolve(__dirname,‘..‘),       manifest:require(‘./vendor-manifest.json‘)    })]

Third, add in the project root directory index.html file:

<body>    <div id="app"></div>    <!-- built files will be auto injected -->    <script  src="<%= webpackConfig.output.publicPath %>spa/js/vendor.dll.js"></script>     //添加这句，路径可根据所需修改</body>

Iv. Packaging DLL Add command in Package.json

"build:dll":"webpack --config build/webpack.dll.conf.js"

V. Order of command

npm run build:dllOnce packaged, the dependent library is no change and does not need to be executed

npm run build

Advantages

DLL packaging is independent, as long as it contains the library does not increment, upgrade, the hash will not change, so the online DLL code does not need to be updated with the release of the frequent.

After the application part of the code modification, only need to compile the app part of the code, DLL parts, as long as the inclusion of the library does not increment, upgrade, there is no need to repackage. This also greatly improves the speed of each compilation.

Suppose you have multiple projects that use the same dependent libraries, and they can share a single DLL.

19s->15s

Set Cachedirectory of Babel to True

Modify the Babel-loader in Webpack.base.conf.js:

 loader:‘babel-loader?cacheDirectory=true‘,

15s->14s

Set Noparse

If you determine that there are no new dependencies in a module, you can configure this, and Webpack will no longer scan the dependencies in this file, which will facilitate performance in comparing large class libraries, as described in the following configurations:

module:{  noParse:/node_modules\/(element-ui\.js)/,  rules: [    {      ...    }}

Happypack

Plus not too much effect, there may be a problem with the usage, need to be thoroughly tried

VUE-CLI Webpack2 Project Packaging optimization