How to speed up and optimize vue-cli code

This time I will show you how to speed up and optimize the vue-cli code, and what are the precautions for speeding up and optimizing the vue-cli code. The following is a practical case, let's take a look.

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 other high-quality projects, using Vue for front-end construction is already an engineering task. , Modularization, Agile things

Among them, I believe many people will choose the official vue-cli initialization project template, and then develop and build it by introducing third-party 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 construction 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 and make the least modifications to the official template to earn the maximum build performance improvement

Thoughts

In the early versions of vue-cli and webpack2, the following optimized configurations were circulated on the Internet, but in fact, the new versions of vue-cli and webpack3 no longer require

1. Use ParallelUglifyPlugin to replace UglifyPlugin (the new version of UglifyPlugin already supports and enables multi-threaded parallel build 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 turned on by default)

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

4. Configure CommonsChunkPlugin to extract the 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 provide on-demand reference methods for components. Taking iview as an example, through 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 Then introduce components as needed to reduce the size

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

2. Enable happypack multi-core build project

After installing happypack, modify the /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 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 the /src/main.js file and 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 step and the most obvious step to improve the effect. The principle is to compile and package the third-party library files separately once. There is no need to compile and package the third-party libraries in subsequent builds

4.1 Add the build/webpack.dll.config.js file and configure the modules that need to be DLLed separately

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 Add command

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

in /package.json 4.4 Add DLL-based JS introduction 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, and there are more tricks and tricks. Coincidentally, I didn’t expand it because I think too much optimization configuration is of little significance, but will bring too much redundancy and complexity to the project

The actual test build effect of the above configuration was reduced from the original 13 seconds to about 6 seconds, and the hot deployment was even millisecond-level

The most important thing is that the simplest configuration can be easily reconfigured and used after vue-cli and webpack are upgraded to new versions in the future. After a proficient configuration, it only takes about 5 minutes to restore the configuration. Think about it. Just modifying the configuration in 5 minutes can increase the speed of each build by more than 2 times. Aren’t you a little excited? :)

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

Every time I look at the various .babelrc, .postcssrc.js... and various .confs in the webpack project 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, there are more than a dozen configuration files , is it really necessary? I originally thought that webpack3 would make all this simple, but it did not. But 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 ​​​​​​​​

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

HTML JS implements a rolling digital clock

How to use VueRouter’s navigation guard

Detailed explanation of the steps for implementing table paging using vue element                      

The above is the detailed content of How to speed up and optimize vue-cli code. For more information, please follow other related articles on the PHP Chinese website!