Optimization of construction speed of vue-cli2

For the front-end projects created by using Vue cli scaffolding, compiling and publishing are almost necessary operations, some of which only need seconds, as fast as lightning, some of which need several minutes, as slow as a snail. If it's online hot fix, it's even more time-consuming. The response speed of the web page directly affects the user experience. Users won't have the patience to wait for a long time and let you compile slowly.

There are some optimized configurations of Vue cli on the Internet. Some of them are no longer needed in the new version of Vue CLI and webpack3, and some are for webpack4. For the new versions of Vue CLI and webpack3, the following simple configuration optimization can greatly improve the construction speed.

1. On demand reference and dynamic routing
2. Enable uglifyjs webpack plugin cache
3. Close source map
4. Use DllPlugin and DllReferencePlugin to extract Public Libraries

I. dynamic routing
1. Modify src/router/index.js

 1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 
 4 // webpackChunkName Packaged file name
 5 const Menu = () => import(/* webpackChunkName: 'Menu' */ '@/pages/menu/index.vue')
 6 
 7 export default new Router({
 8   routes: [
 9     {
10       path: '/',
11       name: 'Menu',
12       component: Menu
13     }
14   ]
15 })

2. Configure. babelrc (optional)

1 {
2   ...  
3   "comments": true, // Output compilation information
4   "plugins": ["transform-vue-jsx", "transform-runtime"]
5 }

3. Modify build/webpack.prod.conf.js

1 output: {
2     path: config.build.assetsRoot,
3     filename: utils.assetsPath('js/[name].[chunkhash].js'),
4     chunkFilename: utils.assetsPath('js/[name].js') // Use webpackChunkName File name defined
5 },

2. Enable uglifyjs webpack plugin caching

1 new UglifyJsPlugin({
2       parallel: true, // parallel
3       cache: true   // cache
4 }),

III. close source map

Modify the productionSourceMap value in src/config/index.js

productionSourceMap:false

IV. public library extraction

1. Install clean webback plugin add asset HTML webback plugin

yarn add clean-webpack-plugin add-asset-html-webpack-plugin@2.1.0 --dev

2. Create webpack.dll.conf.js in the build directory

 1 const webpack = require('webpack')
 2 const path = require('path')
 3 const CleanWebpackPlugin = require('clean-webpack-plugin')
 4 const dllPath = path.resolve(__dirname, '../src/assets/dll') // dll Directory of documents
 5 
 6 process.env.NODE_ENV = 'production' // NODE_ENV Set to production Reduce dependence
 7 
 8 module.exports = {
 9   entry: {    // hold vue Put related modules into a separate dynamic link library
10     vue: ['babel-polyfill', 'vue', 'vue-router', 'vuex', 'axios', 'element-ui']
11   },
12   output: {
13     filename: '[name]-[hash].dll.js', // generate vue.dll.js
14     path: dllPath,
15     library: '_dll_[name]'
16   },
17   plugins: [    
18     new CleanWebpackPlugin(['*.js'], { // Before clearing dll file
19       root: dllPath
20     }),    
21     new webpack.DefinePlugin({      
22       'process.env': {
23         NODE_ENV: JSON.stringify(process.env.NODE_ENV) // Setting environment variables
24       }
25     }),    
26     new webpack.DllPlugin({
27       name: '_dll_[name]',      // manifest.json Describe what the DLL contains
28       path: path.join(__dirname, './', '[name].dll.manifest.json')
29     }),    
30     // Compressed code
31     new webpack.optimize.UglifyJsPlugin({
32       compress: {
33         warnings: false,
34         pure_funcs: ['console.log']
35       },
36       sourceMap: false
37     })
38   ]
39 }

3. Add dll build command in package.json

1 "scripts": {    
2     "dll": "webpack --config build/webpack.dll.conf.js" // dll Pack command
3  },

4. Modify build/webpack.prod.conf.js

 1 const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
 2 
 3 plugins: [    
 4     // Quote manifest.json
 5     new webpack.DllReferencePlugin({
 6       manifest: require('./vue.dll.manifest.json')
 7     }),    
 8     // take dll Injected to generated html Template
 9     new AddAssetHtmlPlugin({
10       filepath: path.resolve(__dirname, '../src/assets/dll/*.js'), // dll file location
11       publicPath: config.build.assetsPublicPath + utils.assetsPath('dll/'), // dll Reference path
12       outputPath: config.build.assetsPublicPath + utils.assetsPath('dll/'), // dll Final output directory
13       includeSourcemap: false
14       // hash: true,
15     }),
16     ...
17 ]

Five. Compile

yarn run dll  // Run a build dll File, no need to run next build

yarn run build

Tags: Javascript Webpack Vue JSON axios

Posted on Mon, 02 Dec 2019 21:05:20 -0500 by hezll