Vue CLI 项目打包后优化文件大小的方法
在开发 Vue CLI 项目时，打包后的文件大小对于应用的性能有着重要影响。较小的文件大小能够加快加载速度，提升用户体验。以下是一些优化文件大小的有效方法。
代码拆分
Vue CLI 支持使用动态导入（Dynamic Imports）进行代码拆分。通过这种方式，可以将应用的代码按照路由或功能模块进行分割，在需要时再异步加载对应的代码块。例如，在路由配置中使用动态导入：
const router = new VueRouter({
routes: [
{
path: '/home',
component: () => import('./views/Home.vue')
}
]
})这样，在打包时，Home.vue 相关的代码会被单独打成一个文件，在用户访问 /home 路由时才会加载，减少了初始加载的文件体积。
去除生产环境不必要的代码
在开发过程中，可能会使用一些调试代码、日志输出等，这些在生产环境是不必要的。可以通过设置环境变量来区分开发和生产环境。在 Vue CLI 项目中，可以在 vue.config.js 中配置：
module.exports = {
chainWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 移除 console.log 等调试代码
config.optimization.minimizer('terser').tap(args => {
args[0].terserOptions.compress.drop_console = true;
return args;
});
}
}
};上述代码在生产环境下会移除所有的 console.log 语句，减小文件体积。
图片优化
对于项目中的图片，可以使用工具进行压缩。例如，在 Vue CLI 项目中，可以使用 image-webpack-loader。首先安装该 loader：
npm install image-webpack-loader --save-dev然后在 vue.config.js 中配置：
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
},
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
gifsicle: {
interlaced: false
},
webp: {
quality: 75
}
})
.end();
}
};这样在打包时，图片会被自动压缩，减小文件大小。
优化 CSS
使用 CSS 预处理器如 Sass、Less 时，可能会引入一些未使用的样式。可以使用 purgecss-webpack-plugin 来移除未使用的 CSS。安装插件：
npm install purgecss-webpack-plugin --save-dev在 vue.config.js 中配置：
const glob = require('glob-all');
const PurgeCSSPlugin = require('purgecss-webpack-plugin');
const PATHS = {
src: path.join(__dirname,'src')
};
module.exports = {
chainWebpack: config => {
config.plugin('purgecss').use(new PurgeCSSPlugin({
paths: glob.sync(`${PATHS.src}/**/*`, {nodir: true}),
safelist: function () {
return {
standard: ['body-dark']
}
}
}));
}
};该插件会扫描项目中的文件，移除未使用的 CSS 规则，从而减小 CSS 文件的体积。
使用 Tree - Shaking
ES6 模块的静态结构允许 webpack 进行 Tree - Shaking，它可以去除未使用的代码。确保项目中使用 ES6 模块语法（import 和 export），并且在 package.json 中设置 "sideEffects": false（如果项目中所有代码都没有副作用），或者指定有副作用的文件路径，这样 webpack 在打包时可以更好地进行 Tree - Shaking，去除无用代码，优化文件大小。
通过以上多种方法的综合应用，可以显著减小 Vue CLI 项目打包后的文件大小，提升应用的性能和加载速度。
本文链接：https://blog.runxinyun.com/post/570.html 转载需授权！
留言0