This is the fifth day of my participation in the August More text Challenge. For details, see:August is more challenging

Firstly, the optimization purpose is explained:

1. Speed up packing time

2. Reduce the volume after packing

First, accelerate the packing time

In order to accelerate the packaging time, you need to narrow down the search scope of the files. Generally, the compilation and building process of the loader and plugin will affect the overall packaging time. You need to compress first, then optimize, which can save a lot of packing time. So we need to reduce the process of searching for files, advance compilation and caching and other methods to achieve

1. Optimize the file search scope of Loader

You can use test, include, and exclude to narrow the processing scope of the Loader. Include is recommended

//string
    include: path.resolve(__dirname, "./src"),
//array
include: [
     path.resolve(__dirname, 'app/styles'),
     path.resolve(__dirname, 'vendor/styles')
]
Copy the code

Note: Exclude takes precedence over include and test, so exclude takes precedence over the other two configurations

2. Optimize the resolve.modules configuration

Reslove. modules is used to configure which directory to look for webPack modules after packaging. The default is node_modules.

module.exports={
     resolve:{
         modules: [path.resolve(__dirname, "./node_modules")]
     }
}
Copy the code

Optimize the resolve.alias configuration

Resolve. alias is a configuration alias that maps the original path to a newly configured path. You can specify the file path directly to avoid time-consuming search

alias: { "@": path.join(__dirname, "./pages"), react: path.resolve( __dirname, "./node_modules/react/umd/react.production.min.js" ), "react-dom": path.resolve( __dirname, "./node_modules/react-dom/umd/react-dom.production.min.js" ) }, resolve: { alias: { "@assets": path.resolve(__dirname, ".. / SRC /images/"),},} // sprite3 {background: url("~@assets/s3.png"); }Copy the code

Optimize the resolve.extensions configuration

Resolveto. Extensions will automatically insert the file suffix when the import statement does not write it and try to find out if the file exists

Default: Extensions :[‘.js’,’.json’,’.jsx’,’.ts’]

So in the development process, we try to bring in the suffix, reduce the time to find the file

5. Use cache

The core of WebPack packaging is the packaging of JS files. Js uses Babel-Loader. Therefore, the long packaging time is mainly caused by the slow execution of Babel-Loader. In this case, exclude and include should be used to accurately determine the scope of the converted content and reduce the conversion of duplicate files. As a result, the size of the packaged files is too large and the compilation speed will also increase.

Use cacheDirectory to specify the directory where Babel is compiled and used to cache the load results, but the default is false and needs to be set to true manually. The default cache directory is node_modules/.cache/babel-loader. But if the node_modules directory is not found in any of the root directories, it will degrade back to the operating system’s default temporary file directory.

rules: [
     {
         test: /\.js$/,
         loader: 'babel-loader',
         options: {
             cacheDirectory: true
         },
     }
];
Copy the code

Second, reduce the volume after packing

In addition to the build, the size of the compressed package is also important. In addition to the cache mentioned above, the terser-Webpack-plugin can also be configured to use multithreading and caching.

Aside: IN 2017, I had only been in VUE for a year. Because JQ had to be used in the project, the volume was too large after packaging, which became a big problem at that time, and it took one or two days to solve it. All aspects should be taken into account, and the solution will be mentioned below

const TerserPlugin = require('terser-webpack-plugin'); Module. exports = {optimization: {minimizer: [new TerserPlugin({cache: true, // enable cache parallel: true // multithreading})]}};Copy the code

You can also use the CDN address or your own server address to store some static resource files, so in the packaging time do not need to pack a lot of things, can greatly reduce the size of the packaging, such as: large background images, JQ address using CDN, Echarts chart class, etc.

If you need to import jq(import $from ‘jquery’) or echarts without packaging them, try configuring externals

//webpack.config.js module.exports = {externals: {//jquery = 'jquery'}}Copy the code

The compression of CSS

With the OPTIMIZE – CSS-assets – Webpack-Plugin, which is a plugin that compresses CSS, the default engine is CSSNano. Css-loader already has CSSNano integrated. You can customize the rules with the optimize- CSS-assets – Webpack-plugin

// NPM install cssnano -d NPM I optimiz-css-assets -webpack-plugin -d const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); New OptimizeCSSAssetsPlugin({cssProcessor: require("cssnano"), // you can specify the engine. Default is cssnano cssProcessorOptions: { discardComments: { removeAll: true } } })Copy the code

The compression of the HTML

// Use html-webpack-plugin new htmlWebpackPlugin({title: "jingjing.com ", template: "./index. "Index.html ", minify: {// compress the HTML file removeComments: true, // delete the comment in the HTML collapseWhitespace: MinifyCSS: true // compress inline CSS}})Copy the code

The compression of JS

Although WebPack automatically compresses JS, it is recommended to use the Terser-Webpack-Plugin, which is officially maintained by WebPack.

const TerserPlugin = require('terser-webpack-plugin'); Module. exports = {optimization: {minimizer: [new TerserPlugin(parallel: true // use and enable multithreading to reduce the time spent on combores)]}};Copy the code