Skip to content

webpack 优化产出代码

优化产出代码

  • 体积更小
  • 合理分包,不重复加载
  • 速度更快,内存使用更少

注,产出代码配置 webpack.prod.js 文件

1、小图片 base64 编码

js
{
    module: {
        rules: [
            // 图片 - 考虑 base64 编码的情况
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        // 小于 5kb 的图片用 base64 格式产出
                        // 否则,依然延用 file-loader 的形式,产出 url 格式
                        limit: 5 * 1024,
                        // 打包到 img 目录下
                        outputPath: '/img1/',
                        // 设置图片的 cdn 地址(也可以统一在外面的 output 中设置,那将作用于所有静态资源)
                        // publicPath: 'http://cdn.abc.com'
                    }
                }
            },
        ]
    },
}

2、bundle 加 hash

js
{
    output: {
        filename: '[name].[contentHash:8].js', // name 即多入口时 entry 的 key
    },
}

3、懒加载,如

js
import('./dynamic-data.js');

4、提取公共代码

js
{
    optimization: {
        // 压缩 css
        minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
        // 分割代码块
        splitChunks: {
            chunks: 'all',
            /**
             * initial 入口chunk,对于异步导入的文件不处理
                async 异步chunk,只对异步导入的文件处理
                all 全部chunk
             */
            // 缓存分组
            cacheGroups: {
                // 第三方模块
                vendor: {
                    name: 'vendor', // chunk 名称
                    priority: 1, // 权限更高,优先抽离,重要!!!
                    test: /node_modules/,
                    minSize: 0,  // 大小限制
                    minChunks: 1  // 最少复用过几次
                },
                // 公共的模块
                common: {
                    name: 'common', // chunk 名称
                    priority: 0, // 优先级
                    minSize: 0,  // 公共模块的大小限制
                    minChunks: 2  // 公共模块最少复用过几次
                }
            }
        }
    }
}

5、IngorePlugin 忽略无用文件

js
{
  plugins: [
    // 忽略 moment 下的 /locale 目录
    new webpack.IgnorePlugin(/\.\/locale/, /moment/),
  ];
}

6、使用 CDN 加速,图片也需要 cdn 配置

js
{
    mode: 'production',
    output: {
        publicPath: 'http://cdn.abc.com'  // 修改所有静态文件 url 的前缀(如 cdn 域名),这里暂时用不到
    },
}

7、使用 production 模式

  • 自动开启代码压缩
  • Vue React 等会自动删除调试代码(如开发环境的 warning)
  • 自动启动 Tree-Shaking
js
{
    mode: 'production',
}

1)什么是 Tree-Shaking ?比如 math.js 有这样一段代码

js
export const sum = (a, b) => {
  return a + b;
};
export const mult = (a, b) => {
  return a * b;
};
// ES6 Module 才能让 tree-shaking 生效
// commonjs 就不行

在 index.js 中只引用 sum 函数

js
import { sum } from './math';

这样在打包是会自动删除 mult 函数,这就是 Tree-Shaking 功能

2)ES6 Module 和 Commonjs 的区别

  • ES6 Module 静态引入,编译时引入
  • Commonjs 动态引入,执行时引入
  • 只有 ES6 Module 才能静态分享,实现 Tree-Shaking
js
let apiList = require('../config/api.js');
if (isDev) {
  // 可以动态引入,执行时引入
  apiList = require('../config/api_dev.js');
}
import apiList from '../config/api.js';
if (isDev) {
  // 编辑时报错,只能静态引入
  import apiList from '../config/api_dev.js';
}

8、使用 Scope Hosting

  • 代码体积更小
  • 创建函数作用域更少
  • 代码可读性更好

比如

js
let a = 1;
let b = 2;
let c = 3;
let d = a + b + c; //在webpack中会自动省略一些可以简化的代码
//简化后的代码如下:console.log(6);
console.log(d);

配置启用 Scope Hosting 功能

js
const ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin')
module.exports = smart(webpackCommonConf, {
    resolve:{
        // 针对 NPM 中第三方模块优先采用 jsnext:main 中指向的 ES6 模块化语法的文件
        mainFields:['jsnext:main','browser','main']
    },
    plugins: [
        // 开启 Scope Hosting
        new ModuleConcatenationPlugin(),
    ],

基于 MIT 许可发布