Vue.js 项目打包优化之路,从哪些方面入手
你是否曾经被繁琐复杂的打包过程折磨得焦头烂额?你是否曾经望着庞大的体积包望而生畏?是这样,那么这篇文章就是专门为量身定制的。
让一起来探讨一下如何把 Vue.js 项目打包优化到飞起!
让从代码分割开始。相信大家都听说过代码分割的好处,可以针对性地加载所需的资源,大大减少初始包的体积。但是,要如何配置呢?别担心,Vue CLI 已经帮做好这一步。只需要在 `vue.config.js` 中配置一下就可以:
```javascript
module.exports = {
chainWebpack: config => {
config.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
vendors: {
name: 'chunk-vendors',
test: /[\\/]node_modules[\\/]/,
priority: -10,
chunks: 'initial'
},common: {
name: 'chunk-common',
minChunks: 2,
priority: -20,
chunks: 'initial',
reuseExistingChunk: true
} } }) } } ```接下来,来优化一下资源压缩。Vue CLI 默认开启 Gzip 压缩,这可以帮大大减小资源体积。但是,有时候还需要进一步优化。比如,可以启用 Brotli 压缩,这种压缩算法比 Gzip 效果更好。只需要在 `vue.config.js` 中加一行代码:
```javascript
module.exports = {
configureWebpack: {
plugins: [
new CompressionPlugin({
algorithm: 'brotliCompress'
}) ] } } ```接下来要解决一个头疼的问题 —— 第三方库的优化。都知道,第三方库通常都很大,不做任何优化,打包出来的文件体积肯定很庞大。这里可以使用 `externals` 配置,将第三方库从打包中排除出去,改为通过 CDN 引入。
```javascript
module.exports = {
configureWebpack: {
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter'
} } } ```来聊聊图片和字体的优化。这些资源通常都很大,不做处理,也会拖慢页面加载速度。这里可以使用 `image-webpack-loader` 和 `url-loader` 来压缩和转换图片,使用 `file-loader` 来处理字体文件。
```javascript
module.exports = {
chainWebpack: config => {
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
mozjpeg: {
progressive: true,
quality: 65
},// optipng.enabled: false will disable optipng
optipng: {
enabled: false,
},pngquant: {
quality: [0.65, 0.90],
speed: 4
},gifsicle: {
interlaced: false,
},// the webp option will enable WEBP
webp: {
quality: 75
} }) } } ```通过以上几个步骤,相信你的 Vue.js 项目打包优化已经有了质的飞跃。不过,这还只是冰山一角,还可以做更多的优化,比如lazy-loading、Tree-shaking 等等。当然,这些就留给自己去探索,相信一定能打造出一个性能超群的 Vue.js 项目!
