修改 webpack.config.js 文件
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
plugins: [new CleanWebpackPlugin(['dist'])]
}
提取公用代码
假如你 a.js 和 b.js 都 import 了 c.js 文件，这段代码就冗杂了。为什么要提取公共代码，简单来说，就是减少代码冗余，提高加载速度。
module.exports = {
//...
optimization: {
splitChunks: {
cacheGroups: {
commons: {
// 抽离自己写的公共代码
chunks: 'initial',
name: 'common', // 打包后的文件名，任意命名
minChunks: 2, //最小引用2次
minSize: 0 // 只要超出0字节就生成一个新包
},
styles: {
name: 'styles', // 抽离公用样式
test: /\.css$/,
chunks: 'all',
minChunks: 2,
enforce: true
},
vendor: {
// 抽离第三方插件
test: /node_modules/, // 指定是node_modules下的第三方包
chunks: 'initial',
name: 'vendor', // 打包后的文件名，任意命名
// 设置优先级，防止和自定义的公共代码提取时被覆盖，不进行打包
priority: 10
}
}
}
}
}
hash
hash 是干嘛用的？ 我们每次打包出来的结果可能都是同一个文件，那我上线的时候是不是要替换掉上线的 js，那我怎么知道哪是最新的呢，我们一般会清一下缓存。而 hash 就是为了解决这个问题而存在的
我们此时在改一些 webpack.config.js 的配置
module.exports = {
//...
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash:8].js'
},
//...
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[hash:8].css',
chunkFilename: '[id].[hash:8].css'
})
]
}
减少 resolve 的解析，配置别名
如果我们可以精简 resolve 配置，让 webpack 在查询模块路径时尽可能快速地定位到需要的模块，不做额外的查询工作，那么 webpack 的构建速度也会快一些
module.exports = {
resolve: {
/**
* alias: 别名的配置
*
* extensions: 自动解析确定的扩展,
* 比如 import 'xxx/theme.css' 可以在extensions 中添加 '.css'， 引入方式则为 import 'xxx/theme'
* @default ['.wasm', '.mjs', '.js', '.json']
*
* modules 告诉 webpack 解析模块时应该搜索的目录
* 如果你想要添加一个目录到模块搜索目录，此目录优先于 node_modules/ 搜索
* 这样配置在某种程度上可以简化模块的查找，提升构建速度 @default node_modules 优先
*/
alias: {
'@': path.resolve(__dirname, 'src'),
tool$: path.resolve(__dirname, 'src/utils/tool.js') // 给定对象的键后的末尾添加 $，以表示精准匹配
},
extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx'],
modules: [path.resolve(__dirname, 'src'), 'node_modules']
}
}
内容版权声明：除非注明，否则皆为本站原创文章。