Vue-cli2 construction speed optimization method

For front-end projects created using vue-cli scaffolding, compilation and release are almost a necessary operation. Some compilation takes only a few seconds, as fast as lightning, while others take several minutes, as slow as snails. If it is hot repair online, it is even more of a matter of time. The speed of web page response directly affects the user experience. Users will not be so patient and wait for a long time, allowing you to compile slowly.

Some optimized configurations of vue-cli are circulated online, some are no longer needed in the new versions of vue-cli and webpack3, and some are targeted at webpack4. For the new version of vue-cli and webpack3, the following simple configuration optimization can greatly improve the build speed.

On-demand references and dynamic routing
Enable uglifyjs-webpack-plugin cache
Close source-map
Extract public libraries using DllPlugin and DllReferencePlugin

1. Dynamic routing

1. Modify src/router/

import Vue from 'vue'
import Router from 'vue-router'

// webpackChunkName packaged file nameconst Menu = () =&gt; import(/* webpackChunkName: 'Menu' */ '@/pages/menu/')

export default new Router({
 routes: [
 {
  path: '/',
  name: 'Menu',
  component: Menu
 }
 ]
})

2. Configure .babelrc (optional)

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

3. Modify build/

output: {
 path: ,
 filename: ('js/[name].[chunkhash].js'),
 chunkFilename: ('js/[name].js') // File name defined using webpackChunkName},

2. Enable uglifyjs-webpack-plugin cache

new UglifyJsPlugin({
  parallel: true, // Parallel  cache: true // cache}),

3. Close source-map

Modify the productionSourceMap value in src/config/

productionSourceMap:false

4. Public library extraction

1. Install clean-webpack-plugin add-asset-html-webpack-plugin

yarn add clean-webpack-plugin [email protected] --dev

2. Create in the build directory

const webpack = require('webpack')
const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const dllPath = (__dirname, '../src/assets/dll') // The directory where the dll file is stored
.NODE_ENV = 'production' // NODE_ENV is set to production to reduce dependencies
 = {
 entry: { // Put vue related modules into a separate dynamic link library vue: ['babel-polyfill', 'vue', 'vue-router', 'vuex', 'axios', 'element-ui']
 },
 output: {
 filename: '[name]-[hash].', // Generate path: dllPath,
 library: '_dll_[name]'
 },
 plugins: [ 
 new CleanWebpackPlugin(['*.js'], { // Clear the previous dll file  root: dllPath
 }), 
 new ({  
  '': {
  NODE_ENV: (.NODE_ENV) // Set environment variables  }
 }), 
 new ({
  name: '_dll_[name]',  // Describe what the dynamic link library contains  path: (__dirname, './', '[name].')
 }), 
 // Compress code new ({
  compress: {
  warnings: false,
  pure_funcs: ['']
  },
  sourceMap: false
 })
 ]
}

3. Add a new dll build command to

"scripts": { 
 "dll": "webpack --config build/" // dll package command },

4. Modify build/

const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')

plugins: [ 
 // Quote new ({
  manifest: require('./')
 }), 
 // Inject dll into the generated html template new AddAssetHtmlPlugin({
  filepath: (__dirname, '../src/assets/dll/*.js'), // dll file location  publicPath:  + ('dll/'), // dll reference path  outputPath:  + ('dll/'), // The directory of the final output of dll  includeSourcemap: false
  // hash: true,
 }),
 ...
]

5. Compilation

yarn run dll // Just run it once to generate the dll file, and you don't have to run it next time you build ityarn run build

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.