Issues related to webpack3 speed optimization in vue-cli

This article mainly introduces the comprehensive speed-up optimization of webpack3 construction of vue-cli. Now I share it with you and give you a reference.

Preface

With the globalization of vue, various vue component frameworks have become more and more perfect, from the early element-ui to vux, iview and more and more high-quality Project, using vue for front-end construction is already an engineering, modular, and agile thing

In this, I believe many people will choose the official vue-cli initialization project template, and then introduce a third party Develop and build using component frameworks and tools. I personally highly recommend this approach. However, the project template initialized by vue-cli is for all developers after all, and there will be certain compromises in terms of compatibility. I believe many people have searched for various webpack build optimization articles, but many of them are either too old or not rigorous

This article hopes to strike a balance between time-consuming optimization and build performance improvement, that is, spend the least time time, make the minimum modifications to the official template, and earn the maximum build performance improvement

Thoughts

In the early version of vue-cli and webpack2 era, it was circulated on the Internet The following optimized configuration, but in fact, the new version of vue-cli and webpack3 no longer requires

1. Use ParallelUglifyPlugin to replace UglifyPlugin (the new version of UglifyPlugin already supports and enables multi-threaded parallel construction by default, so This step is not necessary)

2. Enable Scope Hoisting of webpack3 (the new version of vue-cli has been configured with webapck3, and this configuration has been enabled by default)

3. Make good use of alias (the new version of vue-cli has already done this)

4. Configure CommonsChunkPlugin to extract public code (the new version of vue-cli has already done this)

For the new version of vue-cli and webpack3, the following simple configuration can increase the build speed by at least 2 times after optimization

1. Reference on demand

2. Enable happypack multi-core build project

3. Modify source-map configuration

4. Enable DllPlugin and DllReferencePlugin precompiled library files

Practice

1. Reference on demand

1.1 Almost all third-party component frameworks will Provides an on-demand reference method for components. Taking iview as an example, by using the plug-in babel-plugin-import, components can be loaded on demand and the file size can be reduced. You only need to modify the .babelrc file

npm install babel-plugin-import --save-dev

// .babelrc
{
 "plugins": [["import", {
 "libraryName": "iview",
 "libraryDirectory": "src/components"
 }]]
}

1.2 and then do this on demand Introducing components can reduce the size

import { Button } from 'iview'
Vue.component('Table', Table)

2. Enable happypack multi-core build project

After installing happypack, modify /build/webpack.base.conf.js File

npm install happypack --save-dev

// /build/webpack.base.conf.js
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
// 增加HappyPack插件
plugins: [
 new HappyPack({
  id: 'happy-babel-js',
  loaders: ['babel-loader?cacheDirectory=true'],
  threadPool: happyThreadPool,
 })
 ]
// 修改引入loader
{
 test: /\.js$/,
 // loader: 'babel-loader',
 loader: 'happypack/loader?id=happy-babel-js', // 增加新的HappyPack构建loader
 include: [resolve('src'), resolve('test')]
}

3. Modify the source-map configuration

3.1 First modify the /config/index.js file

// /config/index.js
dev环境：devtool: 'eval'（最快速度）
prod环境：productionSourceMap: false（关闭source-map）

3.2 Then modify / src/main.js file, turn off the debugging information of the production environment

// /src/main.js
const isDebug_mode = process.env.NODE_ENV !== 'production'
Vue.config.debug = isDebug_mode
Vue.config.devtools = isDebug_mode
Vue.config.productionTip = isDebug_mode

4. Enable DllPlugin and DllReferencePlugin precompiled library files

This is the most complicated and the most effective. The obvious step is to compile and package the third-party library files separately. There is no need to compile and package the third-party libraries for subsequent builds.

4.1 Add the build/webpack.dll.config.js file and add it in it Configure modules that require separate DLLs

const path = require("path")
const webpack = require("webpack")

module.exports = {
 // 你想要打包的模块的数组
 entry: {
  vendor: ['vue/dist/vue.esm.js', 'axios', 'vue-router', 'iview']
 },
 output: {
  path: path.join(__dirname, '../static/js'), // 打包后文件输出的位置
  filename: '[name].dll.js',
  library: '[name]_library'
 },
 plugins: [
  new webpack.DllPlugin({
   path: path.join(__dirname, '.', '[name]-manifest.json'),
   name: '[name]_library',
   context: __dirname
  }),
  // 压缩打包的文件
  new webpack.optimize.UglifyJsPlugin({
   compress: {
    warnings: false
   }
  })
 ]
}

4.2 Add the following plug-ins to build/webpack.dev.conf.js and build/webpack.prod.conf.js

new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require('./vendor-manifest.json')
})

4.3 In /package. json Add command

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

4.4 Add DLL-based JS import in /index.html (must be introduced first)

<script src="/static/js/vendor.dll.js"></script>

4.5 Execute the build

npm run dll（这一步会生成build/vendor-manifest.json和static/js/vendor.dll.js）
npm run dev 或 npm run build

Postscript

After the above four major steps are completed, we have completed the optimization and improvement of the vue-cli template project construction. Although it still seems not simple, this is already the simplest optimization. There are more tricks and tricks that have not been developed, because I feel that too much optimized configuration is of little significance, but will bring too much redundancy and complexity to the project.

The construction effect of the actual test of the above configuration It has been reduced from the original 13 seconds to about 6 seconds, and hot deployment is even more millisecond-level.

The most important thing is that the simplest configuration can also be used after vue-cli and webpack are upgraded to new versions in the future. It is easy to reconfigure and use it. After configuring it once, it only takes about 5 minutes to restore the configuration. Think about it, spending 5 minutes to modify the configuration can increase the speed of each build by more than 2 times. Isn’t it a bit small? Excited:)

Let me say a few more words here. In fact, the upgrade from webpack2 to webpack3 is quite disappointing, because it still does not fundamentally solve the problem of overly complex configuration. As the goal is The product that dominates all web projects around the world should be considered more from the perspective of ease of use/humanity

Every time I look at the various .babelrc, .postcssrc.js in the webpack project ...There are also various .conf files, and even various main, index, and app files. I can't help but want to complain about why the front-end construction has developed like this. In a good project, ten Several configuration files, are they really necessary? I originally thought that webpack3 would make all this simple, but it did not. However, since there is no way to change it for the time being, what we can do is to understand the principles as much as possible and try our best to simplify/optimize

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Use js custom trim function to delete spaces at both ends

JavaScript operating principle

Select all and reverse selection in vue

Detailed explanation of using jest to test react native components

Select all implementation data in vue Binding and acquisition

Use time plug-in in mint-ui and obtain selection value

VUE2 realizes secondary province and city linkage selection

The above is the detailed content of Issues related to webpack3 speed optimization in vue-cli. For more information, please follow other related articles on the PHP Chinese website!