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开发环境使用，报错只指出行，不指出列
网友评论