webpack优化篇（四十七）：缩小构建目标

Posted 2022-08-23 凯小默

说明

玩转 webpack 学习笔记

目的

目的：尽可能的少构建模块

比如 babel-loader 不解析 node_modules

减少文件搜索范围

• 优化 resolve.modules 配置（减少模块搜索层级）
• 优化 resolve.mainFields 配置
• 优化 resolve.extensions 配置
• 合理使用 alias

module.exports = 
    resolve: 
        alias: 
            react: path.resolve(__dirname, './node_modules/react/dist/react.min.js'),
        ,
        modules: [path.resolve(__dirname, 'node_modules')],
        extensions: ['.js'], // 表示在 import 文件时文件后缀名可以不写
        mainFields: ['main'], // 当从 npm 包中导入模块时，此选项将决定在 package.json 中使用哪个字段导入模块。
    
;

实战

先不缩小构建目标，然后运行 npm run build

然后添加缩小目标的配置

    test:/.js$/,
    include: path.resolve("src"),
    use: [
        // 
        //     loader: 'thread-loader',
        //     options: 
        //         workers: 3
        //     
        // ,
        // 'babel-loader',
        'happypack/loader',
        // 'eslint-loader'
    ]
,

resolve: 
    alias: 
        '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'),
    ,
    extensions: ['.js'], // 表示在 import 文件时文件后缀名可以不写
    mainFields: ['main'], // 当从 npm 包中导入模块时，此选项将决定在 package.json 中使用哪个字段导入模块。

下面运行打包命令，可以看到速度还是有一些提升的。