preface

As projects get bigger, they take longer to pack and get bigger. So the essential optimization work. This includes package optimization, package volume optimization, and common plug-ins that may be used for development. The version tested here is vue-CLI 2.9.6 version project.

Package-time optimization

Save the time spent packaging, there are divided into cache, multi-process instance packaging, DLL subcontracting.

1. Multi-process instance: Use HappyPack/thread-loader to parse resources

  • How it works: Every time WebPack parses a module, HappyPack assigns it and its dependencies to the worker thread
  • Project Configuration
  • contrast

    Once started, this may not be a big deal because there are more static resources and fewer components

2. Subcontracting: use of pre-compiled resource modules (DLLPlugin and DllReferencePlugin)

DLLPlugin: Package some basic packages such as Vue, VUe-Router, vuex, etc., or some business packages, so that webpack will not analyze it when packaging DllReferencePlugin: Add a configuration file webpack.dll.conf.js under the build file and configure it as follows

const path = require('path')
const webpack = require('webpack')
module.exports = {
  context:process.cwd(),
  resolve: {
    extensions: ['.js'.'.jsx'.'.json'.'.less'.'.css'].modules:[__dirname,'node_modules']},entry: {
    library: [
      'vue'.'vue-router'.'vuex']},output: {filename:'manifest.dll.js'.path:path.resolve(__dirname, './libs/library'),
    library:'[name]'
  },
  plugins: [new webpack.DllPlugin({
      name: '[name]'.path: path.resolve(__dirname, './libs/library/manifest.json')]}})Copy the code
  • Add the plug-in configuration to the webpack.prod.conf.js file as follows
  • Package. json is configured as follows
  • Run the instruction NPM run DLL
3. The cache

Babel-loader is used to optimize the speed of secondary build

Two, packaging volume optimization

The project is basically composed of JS, CSS, HTML, and some images, font files, etc., many of which are inherited if scaffolding tools have been used. Js, CSS, HTML relative to the already better configuration. This section describes configurations that may not exist

1. Compress image image-webpack-loader

Three, the use of development skills

1, resource inlining, resource inlining meaning: reduce the number of HTTP network requests, CSS inlining to avoid page flashing, etc.
  • HTML inline raw - loader
  • Js inline: raw-loader
2. Separate htML-webpack-externals-plugin for the base library

Purpose: To separate some basic libraries or some common resources, avoid loading a large file at once, optimize the experience.