vue 打包分割代码配置
时间: 2024-01-20 21:04:27 浏览: 24
Vue.js 提供了代码分割的功能,可以将代码分割成不同的块,然后按需加载这些块。这样可以减少初始加载时间,提高应用程序的性能。
要实现代码分割,需要在 webpack 配置中设置 optimization.splitChunks 配置项。以下是一个示例 webpack 配置:
```js
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'production',
entry: './src/main.js',
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'dist')
},
optimization: {
splitChunks: {
chunks: 'all'
}
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './public/index.html'
})
]
}
```
在上面的配置中,optimization.splitChunks.chunks 设置为 all,表示分割所有模块。这样 webpack 将会自动分割代码,并将公共代码提取到单独的块中。
在输出文件名中,使用 [chunkhash] 占位符,可以确保每个块都有一个唯一的哈希值,以便在更新时强制客户端重新下载新的文件。
同时,还可以使用 HtmlWebpackPlugin 插件自动生成最终的 HTML 文件。以上配置生成的最终 HTML 文件将会引用所有的块,如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
</head>
<body>
<script src="vendors~main.7a2e40c0.js"></script>
<script src="main.868f3db6.js"></script>
</body>
</html>
```
其中,vendors~main.7a2e40c0.js 是公共代码块的文件名,main.868f3db6.js 是应用程序代码块的文件名。