Tree Shaking

1. css Tree Shaking

yarn add purify-css purifycss-webpack -D const glob = require('glob') const PurifyCSSPlugin = Plugins: [new PurifyCSSPlugin({// glob.sync(path.join(__dirname, 'pages/*/*.html')) }) ]Copy the code

2. Js optimization

yarn add webpack-parallel-uglify-plugin -D const WebpackParallelUglifyPlugin = require('webpack-parallel-uglify-plugin') Plugins: [new WebpackParallelUglifyPlugin ({uglifyJS: {output: {beautify: false, / / no need to format comments: // drop_console: // UglifyJs: // drop_console: // UglifyJs: // drop_console: // UglifyJs: // drop_console: // UglifyJs: // drop_console: Collapse_vars: true, // Delete all 'console' statements, collapse_vars: true, // Inline variable reduce_vars: True // Extract static values that occur multiple times but are not defined as variables to reference}}})]Copy the code

Extract common code

Large sites have multiple pages, each containing many common code links due to the same technology stack and style code

// WebPack4 configuration optimization: {splitChunks: {cacheGroups: {Commons: {chunks: 'initial', minChunks: 2, maxInitialRequests: 5, // The default limit is too small to showcase the effect minSize: 0, // This is example is too small to create commons chunks name: 'common' } } } },Copy the code

Package third-party class libraries

  1. DllPlugin plugin: used to package one dynamic link library after another
  2. DllReferencePlugin: Introduce the DllPlugin plugin wrapped dynamic connection library into the configuration file
In package.json "scripts": {"build": "webpack --mode development", "build: DLL ": "webpack --config webpack.dll.config.js --mode development", "dev": } "webpack.dll. Config. js const path = require('path') const webpack = "webpack-dev --open --mode development" Require ('webpack') /** * reduce search scope * target: '_dll_[name]' specifies export variable name */ module.exports = {entry: {vendor: ['jquery', 'lodash'] }, output: { path: path.join(__dirname, 'static'), filename: '[name].dll.js', library: // Plugins: [new webpack.dllplugin ({name:}); // plugins: [new webpack.dllplugin ({name:}); '_dll_[name]', path: path.join(__dirname, 'manifest.json')})]} in webpack.config.js [new webpack DllReferencePlugin ({manifest: path. Join (__dirname, 'the manifest. Json)})] execution NPM run build: DLL can pack to third-party packagesCopy the code

Using happypack

HappyPack allows Webpack to split tasks into multiple sub-processes for concurrent execution, which then send the results to the main process. happypack

npm i happypack@next -D const HappyPack = require('happypack') const os = require('os') const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length }) { test: /\.js$/, // loader: 'babel-loader', loader: 'happypack/loader? Id =happy-babel-js', // add new HappyPack build loader include: [resolve(' SRC ')], exclude: /node_modules/,} plugins: [ new HappyPack({ id: 'happy-babel-js', loaders: ['babel-loader?cacheDirectory=true'], threadPool: happyThreadPool }) ]Copy the code

Show packing time

yarn add progress-bar-webpack-plugin -D
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
plugins: [
    new ProgressBarPlugin({
      format: '  build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)'
    })
]
Copy the code

Multipage configuration

Git complete code link

Index: './pages/index/index.js', base: {// Entry is a string or an array that is a single page. './pages/base/base.js'} Plugins: [new HtmlWebpackPlugin({template: './pages/index/index.html', filename: 'pages/index.html', hash: true, chunks: ['index', 'common'], minify: { removeAttributeQuotes: true } }), new HtmlWebpackPlugin({ template: './pages/base/base.html', filename: 'pages/base.html', hash: true, chunks: ['base', 'common'], minify: { removeAttributeQuotes: true } }), ]Copy the code

Complete multi-page configuration code git complete code link

const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const CleanWebpackPlugin = require('clean-webpack-plugin') const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin') const Webpack = require('webpack') const glob = require('glob') const PurifyCSSPlugin = require('purifycss-webpack') // let cssExtract =  new ExtractTextWebpackPlugin('static/css/[name].css') module.exports = { entry: { index: './pages/index/index.js', base: './pages/base/base.js' }, output: { path: Path. join(__dirname, 'dist'), // name is the name of the entry main, hash is the hash value calculated from the contents of the packed file filename: 'static/js/[name].[hash].js', publicPath: '/' }, module: { rules: [ { test: /\.css$/, use: ExtractTextWebpackPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'postcss-loader'] }) }, { test: /\.js$/, use: { loader: 'babel-loader', query: { presets: ['env', 'stage-0', 'react'] } } } ] }, optimization: { splitChunks: { cacheGroups: { commons: { chunks: 'initial', minChunks: 2, maxInitialRequests: 5, // The default limit is too small to showcase the effect minSize: 0, // This is example is too small to create commons chunks name: 'common' } } } }, plugins: [ new CleanWebpackPlugin([path.join(__dirname, 'dist')]), new HtmlWebpackPlugin({ template: './pages/index/index.html', filename: 'pages/index.html', hash: true, chunks: ['index', 'common'], minify: { removeAttributeQuotes: true } }), new HtmlWebpackPlugin({ template: './pages/base/base.html', filename: 'pages/base.html', hash: true, chunks: ['base', 'common'], minify: { removeAttributeQuotes: true } }), new ExtractTextWebpackPlugin({ filename: 'static/ CSS /[name].[hash].css'}), new PurifyCSSPlugin({// glob.sync(path.join(__dirname, 'pages/*/*.html')) }) ], devServer: { contentBase: path.join(__dirname, 'dist'), port: 9090, host: 'localhost', overlay: true, compress: trueCopy the code

Vue-cli several important paths

AssetsSubDirectory (static) The rest of the JS, IMG, CSS is in assetsPublicPath: project directory a bar (/)Copy the code