Webpack（十四）：性能优化-HMR、调试、oneOf

webpack性能优化

• ​​开发环境​​性能优化

• ​​优化webpack的打包构建性能​​

• HMR 开发环境优化

• ​​优化代码调试功能​​

• 代码调试优化

• ​​生产环境​​性能优化

• ​​优化webpack的打包构建性能​​

• 优化​​生产环境​​​打包构建速度​​oneOf​​

• ​​优化代码运行性能​​

HMR 开发环境优化

​​优化webpack的打包构建速度​​

默认执行 ​​npx webpack-dev-server​​ 会打包所有模块再刷新页面进行展示处理，问题在于含有大量模块会影响打包构建速度

• 优化方式：通过​​HMR​​​ ( hot module replacement 模块热替换，优化每次打包都打包所有模块的功能)
  ​​webpack.config.js​​

devServer: {
    /* CODE */
    hot: true
},

• 检测是否生效

• css样式文件：​​由于 style-loader 内部实现了支持此功能，所以能实现 HMR 功能​​
• js文件：​​默认不使用HMR功能，会进行页面整体刷新​​

• 解决方法（修改​​index.js​​）：

import print from './print'; /* function print() { console.log('abcd'); }; export default print; */
print();
if (module.hot) {
    module.hot.accept('./print.js', () => {
        print();
    });
}

• html文件：​​默认不使用HMR功能，同时不会对页面进行整体刷新​​

• 解决方法（修改​​webpack.config.js​​）：

• ​​entry: ['./src/index.js', './src/index.html']​​​ 能对页面进行热更新（​​不需要HMR功能​​）

代码调试优化

• ​​source-map​​ 提供源代码到构建后代码的映射关系技术(如果构建后代码出错，会直接映射追踪到源代码，利于代码调试)

• 修改​​webpack.config.js​​​:​​devtool: 'source-map'​​

• devtool 参数

• ​​[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map​​
• 内联：内联构建速度更快
• 外部：外部生成​​.map​​​文件​​source-map​​​​hidden-source-map​​

• ​​开发环境​​总结：

• 调试友好：​​source-map​​​ >​​cheap-module-source-map​​​ >​​cheap-source-map​​
• 速度：​​eval​​​ >​​inline​​​ >​​cheap​​ > ···
• 一般使用：​​eval-source-map​​

• ​​生产环境​​总结：

• 内联会让代码体积变大，故而不实用内联
• 隐藏代码：

• ​​nosources-source-map​​ 全部隐藏
• ​​hidden-source-map​​ 只隐藏源代码，会提示构建后代码错误

• 友好程度：​​source-map​​

优化​​生产环境​​​打包构建速度 ​​oneOf​​

• 正常情况来说一种文件只能被一个loader进行处理，当一种文件需要被多个loader处理时，那么一定要指定loader顺序，比如先执行​​eslint​​​在执行​​babel​​
• 处理方法：​​oneOf: [以下loader只会匹配一种类型文件，将匹配重复种类的loader放到rules数组中，因为oneOf中不能有两个loader处理相同种类文件]​​

module.exports = {
    module: {
        rules: [
            // 代码语法检测  airbnb-base
            {
                test: /\.js$/,
                exclude: /(node_modules|build)$/,
                enforce: 'pre', // 优先执行 避免与兼容部分冲突
                loader: 'eslint-loader',
                options: {
                    fix: true, // 自动修复eslint错误
                },
            },
            {
                oneOf: [
                    // 处理css
                    {
                        test: /\.css$/,
                        use: [
                        MiniCssExtractPlugin.loader,
                            'css-loader',
                            'postcss-loader',
                        ],
                    },
                    // 处理less
                    {
                        test: /\.less$/,
                        use: [
                        MiniCssExtractPlugin.loader,
                            'css-loader',
                            'postcss-loader',
                            'less-loader',
                        ],
                    },
                    // 处理图片
                    {
                        test: /\.(png|jpg|gif)$/,
                        loader: 'url-loader',
                        options: {
                            limit: 100 * 1024,
                            name: '[hash:10].[ext]',
                            outputPath: 'images',
                        },
                    },
                    // 处理html
                    {
                        test: /\.html$/,
                        loader: 'html-loader',
                    },
                    // 处理其他资源
                    {
                        exclude: /\.(css|js|less|html|png|jpg|gif)$/,
                        loader: 'file-loader',
                        options: {
                        name: '[hash:10].[ext]',
                        outputPath: 'other',
                        },
                    },
                    // js兼容性处理
                    {
                        test: /\.js$/,
                        exclude: /node_modules/,
                        loader: 'babel-loader',
                        options: {
                            // 按需兼容
                            presets: [
                                [
                                    '@babel/preset-env',
                                    {
                                        useBuiltIns: 'usage', // 按需加载
                                        corejs: {
                                        version: 3, // 指定corejs版本
                                        },
                                        targets: { // 指定兼容性做到哪个版本的浏览器
                                        chrome: '60',
                                        firefox: '60',
                                        ie: '6',
                                        safari: '10',
                                        edge: '17',
                                        },
                                    },
                                ],
                            ],
                        },
                    },
                ]
            }
        ],
    },
};