preface

With the globalization of VUE, various vUE component frameworks are becoming more and more perfect, from the early Element – UI to VUX, iView and more and more high-quality projects, using VUE for front-end construction has become an engineering, modular, agile thing

In this case, I’m sure many of you will opt for the official Vue-CLI initializing project templates and then developing and building them by introducing third-party component frameworks and tools, which I’m a big fan of. However, vue-CLI-initialized project templates are intended for all developers, and there are compatibility compromises. Many of you have searched for webPack build optimization articles, but many of them are either too old or too loose. This article aims to strike a balance between time-consuming optimization and build performance improvement, that is, maximizing build performance with the least amount of time and changes to the official templates

Train of thought

Earlier versions of VUE-CLI and Webpack2 era, the following optimization configuration is popular online, but in fact, the new version of vue-CLI and Webpack3 are no longer needed

  • Replace UglifyPlugin with ParallelUglifyPlugin (the new version of UglifyPlugin already supports and enables multi-threaded parallel builds by default, so this step is not necessary)

  • Enable the Scope of WebPack3 (WebAPck3 has been configured in the new VUE – CLI version, and this configuration has been enabled by default)

  • Make good use of Aliases (new vUE – CLI already does this)

  • Configure CommonsChunkPlugin to extract common code (new vUE – CLI already does this)

For new versions of vue-cli and webpack3, the following simple configuration can be optimized to increase build speed by at least 2 times

  1. On-demand reference
  2. Enable the Happypack multi-core build project
  3. Example Modify the source-map configuration
  4. Enable DllPlugin and DllReferencePlugin precompiled library files

practice

1. Quote as needed

1.1 Almost all third-party component frameworks provide on-demand reference of components. Taking iView as an example, babel-plugin-import can be used to load components on demand and reduce the size of files. Babelrc files only need to be modified

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

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

1.2 The volume can then be reduced by introducing components as needed

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

2. Enable the 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 })
// Add the HappyPack plugin
plugins: [
    new HappyPack({
      id: 'happy-babel-js'.loaders: ['babel-loader? cacheDirectory=true'].threadPool: happyThreadPool,
    })
  ]
// Modify the imported Loader
{
    test: /\.js$/.// loader: 'babel-loader',
    loader: 'happypack/loader? id=happy-babel-js'.// Add new HappyPack build loader
    include: [resolve('src'), resolve('test')]}Copy the code

3. Modify source-map configuration

3.1 Modify /config/index.js first

// /config/index.jsDev environment: devtool'eval'Prod environment: productionSourceMap:false(Close source-map)Copy the code

3.2 Modify the/SRC /main.js file to disable debugging information in the production environment

// /src/main.js
constisDebug_mode = process.env.NODE_ENV ! = ='production'
Vue.config.debug = isDebug_mode
Vue.config.devtools = isDebug_mode
Vue.config.productionTip = isDebug_mode
Copy the code

4. Enable DllPlugin and DllReferencePlugin to precompile library files

This is the most complex and most significant step, and the principle is to compile and package the third-party library files separately, so that future builds do not need to compile and package the third-party library again

4.1 increase the build/webpack. DLL. Config. Js file, and in which the configuration requires a separate DLL module

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

module.exports = {
  // The array of modules you want to pack
  entry: {
    vendor: ['vue/dist/vue.esm.js'.'axios'.'vue-router'.'iview']},output: {
    path: path.join(__dirname, '.. /static/js'), // The output location of the packaged file
    filename: '[name].dll.js'.library: '[name]_library'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '. '.'[name]-manifest.json'),
      name: '[name]_library'.context: __dirname
    }),
    // Compress the packaged files
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false}}})]Copy the code

4.2 in the build/webpack. Dev. Conf. Js and build/webpack. Prod. Conf., js increase the following plug-ins

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

4.3 Add commands in /package.json

"dll": "webpack --config ./build/webpack.dll.config.js"
Copy the code

4.4 Add DLL JS to /index.html (must be introduced first)

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

4.5 Building a Vm

NPM run DLL (this step generates build/vendor-manifest.json andstatic/js/ vendor.dl.js) NPM run dev or NPM run buildCopy the code

Afterword.

After completion of the above four major steps, we’re done with the vue – cli template engineering build optimization increases, while it is still not easy, but it is the most the most the most simple optimization, there are more exotic curiosity-a solution looking no, because I think too much makes little sense to optimize configuration, it will bring much redundancy and complicated project

The above configuration was actually built in about 6 seconds, down from 13 seconds, and hot deployment in milliseconds

Most important, the most simple configuration, vue – cli and webpack upgrade in the future after the new version, can also be easily reconfigured into use, skilled configuration once, again to restore configuration only takes five minutes to think about 5 minutes a change on the configuration, can for each build more than 2 times the speed of ascension, will a little excited? )

In fact, webpack2 to Webpack3 upgrade, PERSONALLY feel quite disappointed, because it still does not fundamentally solve the problem of its configuration is too complex, as the goal is to occupy all the world’s Web projects built products, It should think more from a usability/human perspective every time you look at a Webpack project. Conf files, and even main, index, and app files, I couldn’t help but wonder why front-end construction would develop like this. Is it really necessary to have dozens of configuration files in a good project? I thought Webpack3 would make this easier, but it didn’t, and since there’s no way to change it right now, all we can do is try to understand how it works and simplify/optimize it to the best of our ability

Subsequent…

This article to start or the end of 2017, think and discuss about the postscript 】 【, in fact, in 2018 there has been a more perfect solution, that is the parcel, though, there are few domestic search information about it, but for now, this is almost a front-end to build the most perfect and the ultimate solution. For webPack configurations that are too complex and intrusive, Parcel is built with zero configuration. Although I am not full time working in the front, but the front is also one of my great interest, for the front cutting-edge results must be try for parcel to let me in now, that so far, I have put my individually-owned front-end project regardless of size, all switch to parcel to build, Abandon WebPack altogether. I’m currently open sourcing parcel – Vue Github & Parcel- vue for my parcel – vue template engineering project, hoping to help more readers who are stuck with WebPack or are blocked from learning from the front end by complex builds

Thank you for reading and hope you found this article helpful 🙂

About: XServer official website