vue3的项目打包优化 vue3的项目打包优化

1.webpack-bundle-analyzer 分析包 vuecli 2.x自带了分析工具------只要运行npm run build --report 如果是vuecli 3的话，先安装插件------npm intall webpack-bundle-analyzer –save-dev 在 vue.config.js中对 webpack进行配置

生产，开发都可以看到打包文件的大小：（npmrun serve跟npm run build）
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
},
但是在开发项目启动的时候，去打包就会有端口号报错的问题；所以一般只在生产环境（执行打包的时候）去配置

生产可以看到打包文件的大小：（npmrun build跟npm run build --report）
chainWebpack: (config) => {
/* 添加分析工具*/
if (process.env.NODE_ENV === 'production') {
//启动时动态创建一个html：http://localhost:8888/report.html
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
.end();
// 生成一个静态html，report.html
//config
//.plugin('webpack-report').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [ { analyzerMode: 'static' } ]);
config.plugins.delete('prefetch')
} }

因为 vuecli 3默认开启 prefetch(预先加载模块)，提前获取用户未来可能会访问的内容，在首屏会把这十几个路由文件，都一口气下载了所以我们要关闭这个功能，在 vue.config.js中设置（如上config.plugins.delete('prefetch')） 2.配置gzip压缩安装 compression-webpack-plugin------npm install compression-webpack-plugin --save-dev

// 在 vue.congig.js中引入gzip并修改 webpack配置
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new CompressionPlugin({
test:/\.js$|\.html$|\.css/,// 哪些文件要压缩
// filename: '[path].gz[query]',　// 压缩后的文件名
threshold:0,//对只有大小大于该值的资源会被进行压缩
algorithm:'gzip',　// 使用gzip压缩
minRatio:0.8,　// 压缩率小于0.8才会压缩
deleteOriginalAssets:false // 删除未压缩的文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false
})
],
}
};
configureWebpack:config=>{
if(process.env.NODE_ENV ==='production') {
config.plugins.push(
...[newCompressionWebpackPlugin({
filename:'[path].gz[query]',
algorithm:'gzip',
test:/\.(js|css|html|svg)$/i,
threshold:2048,
minRatio:0.8
})
] );
}
}

3. webpack splitChunks(提取公共代码，防止代码被重复打包，拆分过大的js文件，合并零散的js文件)

chainWebpack: config=> {
if (process.env.NODE_ENV === 'production') {
config.optimization.splitChunks({
cacheGroups: {
vendor: {
chunks:'all',
test:/node_modules/,
name:'vendor',
minChunks:1,
maxInitialRequests:5,
minSize:0,
priority:100
},
common: {
chunks:'all',
test:/[\\/]src[\\/]js[\\/]/,
name:'common',
minChunks:2,
maxInitialRequests:5,
minSize:0,
priority:60
},
styles: {
name:'styles',
test:/\.(sa|sc|c)ss$/,
chunks:'all',
enforce:true
},
runtimeChunk: {
name:'manifest'
}
}
})
}
}

4.图片压缩（小图片压缩成 base64 格式，1可以自己用压缩软件去压缩，2vue.config.js中webpack配置）

npm installimage-webpack-loader -D
---------------------------------------------------
module.exports = {
chainWebpack: config => {
// 10kb以内的图片会被打包成内联元素
config.module
.rule('images')
.use('url-loader')
.loader('url-loader')
.tap(options => Object.assign(options, {limit: 10240}));
}
};
--------------------------------------------------
chainWebpack: config => {
config.module
.rule('images')
.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({ bypassOnDebug: true }) .end()
},

5.第三方库用cdn引入（第三方库两个优化方向1.按需加载2.cdn资源引入）

moment，ant-design-vue
1.index.html引入

2.在vue.config.js的configureWebpack里面的externals里面加入（main.js去掉import，不然还是会打包进去）
configureWebpack: {
// 用cdn方式引入
externals:{
'vue': 'Vue',
'ant-design-vue': 'antd',
"moment": "moment", },
}
注意：ant-design-vue还是得在main.js里面引用
Vue.config.productionTip = false; Vue.use(antd);
3.ant-design在页面里面直接使用就可以，moment在页面里面需要importmomentform‘moment’，直接moment（）使用
注意：如果要在template里面使用{{moment（）}}------需要components: { moment }；data里面定义moment

6.vue-cli3打包生成环境移除console.log

npm install babel-plugin-transform-remove-console --save-dev
在babel.config.js文件【先配置不同的环境变量VUE_APP_ENV】
// 这是项目发布阶段需要用到的 bable 插件

const prodPlugin = []
if (process.env.NODE_ENV ==='production') {
// 如果当前是发布环境，那么添加transform-remove-console插件，以实现删除项目中的所有的 console 代码
// prodPlugin.push('transform-remove-console')
prodPlugin.push([
'transform-remove-console',{
// 保留 console.error 与console.warn
exclude: ['error','warn']
}
])
}

7. 路由懒加载

如果能把不同路由对应的组件分割成不同的代码块，在路由被访问时才加载对应组件，能有效减小首页的加载压力。但是当跳转到新页面的时候，需要等待新页面 js 文件的加载，体验会变差。
router.js：
exportdefault
newVueRouter({
routes: [
{path:'/',component:()=>import(/* webpackChunkName: 'home-group' */'../views/home') }
]
})
搭配 Vue 异步组件和 Webpack 的代码分割功能webpackChunkName实现懒加载

9.组件懒加载

const Navigator = () => import(/* webpackChunkName: 'home-group' */ '../components/Navigator')
...
components: { Navigator }

10.将 productionSourceMap 设为 false再次打包就没有.map文件了（在vue.config.js文件里面）

module.exports = { productionSourceMap: false}

11.在 Vue CLI 3 中我们还可以再做一步：因为 Vue CLI 3 默认开启了prefetch（预加载模块），用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容。可以考虑关闭这个功能，在vue.config.js中设置：

module.exports = {
chainWebpack: config => {
// 移除 prefetch 插件config.plugins.delete('prefetch')
// 或者
// 修改 prefetch 的选项：
config.plugin('prefetch').tap(options => {
options[0].fileBlacklist = options[0].fileBlacklist || [] options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/) return options
})
}
}

当prefetch插件被禁用时，可以通过 webpack 的内联注释手动选定要提前获取的代码区块：

{ path: '/element', name: 'Element', component: () => import(/* webpackPrefetch: true */ '../src/pages/element') }

12.代码压缩（用terser-webpack-plugin替换掉uglifyjs-webpack-plugin解决uglifyjs不支持es6语法问题） Js压缩------terser-webpack-plugin

(1) 安装依赖：npm install terser-webpack-plugin -D
(2) 在vue.config.js 最上边引入依赖
const TerserJSPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimizer: [
new TerserJSPlugin({
cache: true, // 开启缓存
paraller: true
})
],
}
};
js的其他优化可参考-----链接https://www.cnblogs.com/sunshq/p/10910870.html

Css压缩------ optimize-css-assets-webpack-plugin