webpack - 项目优化

Webpack学习笔记
webpack - 项目优化
webpack实现原理
webpack - loader
webpack - plugin
webpack - 项目优化2

cdn dllPlugin 代码分隔 splitChunk happypack

webpack-bundle-analyzer 代码分析插件

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

module.exports = {
    mode: 'production',
    entry: {
        a: './src/a.js',
        b: './src/b.js'
    }, 
    plugins: [
        new BundleAnalyzerPlugin(), // 代码分析
        new HtmlWebpackPlugin()
    ]
}

运行npx webpack --config webpack.config.js会出现以下界面

image.png

面积越大，文件越大，可以对比较大的文件进行拆包，来加快页面加载速度

vue（vue-cli3）中的webpack-bundle-analyzer

使用npm run build --report启动，貌似并不需要配置，直接就能用？

在vue-cli3的 vue.config.js 中不可直接require(webpack)，会编译失败，但引用它的子类没事，如 require('webpack/lib/ContextReplacementPlugin')

在 nuxt 中使用npx nuxt build --analyze（需要将 nuxt.config.js 中 build 下 analyze设为 true）

拆包 splitChunks

    optimization: {
        splitChunks: {
            chunks: 'async',  // 分离异步代码（import()） initial 同步代码  all 所有
            //   minSize: 30000,   // 超过30000B才分离
            //   maxSize: 0,
            //   minChunks: 1,     // 有一个文件引用就分离
            //   maxAsyncRequests: 5,          // 按需加载时最大并行请求数
            //   maxInitialRequests: 3,        // 入口点的最大并行请求数
            //   automaticNameDelimiter: '~',  // 分离出来的包的名字分隔符
            //   name: true,
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,   // node_modules 打包成一个文件
                    priority: -10                     // 优先级
                },
                default: {
                    minChunks: 2,
                    priority: -20
                }
            }
        }
    },

注释部分是默认值们。示例：

// a.js
import 'moment';
import './lib';

// b.js
import 'moment';
import './lib';

// lib.js
export default function () { return 'abc' }

// webpack.config.js
        chunks: 'initial'

node_modules 下的 moment被单独打成了一个包 vendors~a~b.js，lib.js 被打包成了 default~a~b.js

修改 cacheGroups，为 default~ a~b.js 指定名称：

            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,   
                    priority: -10                     
                },
                mylib: {
                    filename: 'mylib.js',
                    minChunks: 2,
                    minSize: 0,
                    priority: -20
                }
            }

关于异步模块，在 a.js 和 b.js 中添加 import('./async_lib.js')（只有一行代码）但在页面中没有关于它的块，怀疑是因为它太小的原因，换成import('lodash')成功。尝试为vendors改名，但是提示

You are trying to set a filename for a chunk which is (also) loaded on demand. The runtime can only handle loading of chunks which match the chunkFilename schema. Using a custom filename would fail at runtime

难道是不能为异步模块改名？代码如下：

// a.js
import 'moment';
import './lib';
import('lodash')

// b.js
import 'moment';
import './lib';
import('lodash')

// lib.js
export default function () { return 'abc' }

// webpack.config.js
            chunks: 'all', 
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10
                },
                mylib: {
                    filename: 'mylib.js',
                    minChunks: 2,
                    minSize: 0,
                    priority: -20
                }
            }

2.js为异步模块lodash，改名失败

resolve 解析

// src/a.js
import '@/index';

// src/style/index.css
body { background: thistle; }

module.exports = {
    mode: 'development',
    entry: {
        a: './src/a.js',
    },
    resolve: {
        alias: {    // 别名
            '@': path.resolve(__dirname, 'src/style')
        },
        extensions: ['.js', '.css', '.json', '.jsx'],    // 扩展名查找顺序
        // 第三方模块查找路径（myLibs里放的个人模块）
        modules: [path.resolve(__dirname, 'node_modules'), 'myLibs'],

        // 指定package.json的入口字段，当别人引用我的包时？
        // 默认值为 ["browser", "module", "main"]，纯node项目是 module
        mainFields: ['style', 'main'],   
        mainFiles: ['index', 'main']    // 解析目录时要使用的文件名
    }
}

不加 extensions 会提示找不到 @/index

devtool

• source-map 源码映射，webpack打包后es6代码会被bebal成es5代码，在出现错误时，根据源码映射找到真实错误的（es6）代码。生产环境不要用！

• cheap-module-source-map 开发环境使用，报错只指出行，不指出列

多线程打包 happypack

https://www.npmjs.com/package/happypack