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
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)
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
Reference on demand
# 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!