webpack基础知识学习(十一)--打包优化

1.分包---splitChunks 可以对第三方引入的插件分开打包

// webpack.config.js

module.exports = {
    optimization: {
        // 修改分包的名称开头 natural named
        chunkIds: 'deterministic',
        // 表示开始minimizer，使用插件来处理
        minimize: true,
        // 消除打包之后生成的LISENCE.txt文件
        minimizer: [
            new TerserPlugin({
                extractComments: false,
            }),
        ],
        // 会把用到的第三方插件打包进一个公共的文件
        // initial处理同步  async处理异步
        splitChunks: {
            chunks: 'all',
            // 被引用一次就会被单独拆分
            minChunks: 1,
            // 对第三方插件的打包改名
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    filename: 'js/[id].vendor.js'
                }
            }
        },
        // 保存了打包入口文件对其他文件的引用关系数据
        runtimeChunk: true
    },
}

2.代码懒加载。我们对首次加载不需要的代码设置延迟加载，或者在需要的时候才加载。通过import()函数实现。

prefetch会在浏览器空闲的时候加载该模块

preload 以并行的方式加载文件

import(
    /* webpackChunkName: 'aaa' */ 
    /* webpackPrefetch: true */ 
    /* webpackPreload: true */ 
    './xxx.js').then((result) => {})

3.CDN设置

需要在html入口文件中引入CND链接

// public/index.html
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.core.js"></script>

// webpack.config.js
module.exports = {
    externals: {
        lodash: '_'
    }
}

4.tree shaking(树摇)

useExports:是将没有用到的代码进行标记，如果打包不需要，则需要使用TerserPlugin将这些无用代码摇掉

sideEffects:模块副作用，比如对window下添加属性，但是这个属性又没有被应用

// package.json
// sideEffects设置为false,意思就是不开启副作用,就比如window下挂在的属性就访问不到了。
// 设置为一个数组时，意思是当前文件使用副作用
{
    "sideEffects": false
}

{
    "sideEffects": [
        './src/xxx.js'
    ]
}

5.css-treeShaking

安装插件 yarn add mini-css-extract-plugin css-minimizer-webpack-plugin purgecss-wenpack-plugin glob --dev

mini-css-extract-plugin 将css代码都抽离出来生成一个文件

css-minimizer-webpack-plugin 将css代码进行压缩

purgecss-wenpack-plugin 摇掉没有用到的css样式

// webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
    module: {
        rules: [
            {
                test: /\*css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    require('postcss-preset-env')
                                ]
                            }
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        // 分离css
        new MiniCssExtractPlugin(),
        // 摇掉css的无用代码
        new PurgeCSSPlugin({
            paths: glob.sync(`${PATHS.src}/**/*`,  { nodir: true }),
            safelist: function() {
                return {
                    standard: ['body', 'html']
                }
            }
        }),
    ],
    // 压缩css代码
    optimization: {
        minimizer: [
            new CssMinimizerPlugin()
        ]
    }
}

6.js代码压缩terser-webpack-plugin

// wenpack.config.js

const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

7.资源文件压缩compression-webpack-plugin

当我们把文件都处理好打包之后，我们还可以使用compression-webpack-plugin将css或者js文件压缩处理，使文件体积更小

const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
    plugins: [
        new CompressionPlugin({
            test: /\.(css|js)$/,
        })
    ]
}