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 [email protected] --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