去除生产环境sourceMap
当vue项目打包之后js文件夹中，会自动生成一些map文件，占用相当一部分空间
map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪 里的代码报错，有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
//vue.config.js
module.exports = {
//去除生产环境的productionSourceMap
productionSourceMap: false,
}
对比dsit文件去除生产环境的productionSourceMap 和不去除生产环境的productionSourceMap 的大小
使用CDN 加速优化
//vue.config.js
const { defineConfig } = require('@vue/cli-service')
const isProduction = process.env.NODE_ENV === 'production';
//不修改的文件
const externals = {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
vant: 'vant',
axios: 'axios'
}
const cdn = {
// 开发环境
dev: {
css: [],
js: []
},
// 生产环境
build: {
css: ['https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css'],
js: [//静态资源cdn
'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
'https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js',
'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
'https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js',
'https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js'
]
}
}
module.exports = defineConfig({
transpileDependencies: true,
productionSourceMap: false,//去除生产环境sourceMap
configureWebpack: config => {
// 为生产环境修改配置...
if (isProduction) {
// externals
config.externals = externals
}
},
chainWebpack: config => {
// 添加CDN参数到htmlWebpackPlugin配置中
config.plugin('html').tap(args => {
if (isProduction) {
args[0].cdn = cdn.build
} else {
args[0].cdn = cdn.dev
}
return args
})
}
})
在 public/index.html 中添加
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- 添加开始 -->
<% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
<% } %>
<!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
<% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
<!-- 添加结束 -->
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
安装speed-measure-webpack-plugin插件可以在build的时候看到webpack的loader和plugin所用的时间
//vue.config.js
const SpeedMeasureWebpackPlugin=require('speed-measure-webpack-plugin')
module.exports = defineConfig({
transpileDependencies: true,
productionSourceMap: false,
// devServer: {
// proxy: 'http://47.93.101.203'
// }
configureWebpack: config => {
// 为生产环境修改配置...
if (isProduction) {
// externals
config.externals = externals
}
},
chainWebpack: config => {
/**
* 添加CDN参数到htmlWebpackPlugin配置中
*/
config.plugin('html').tap(args => {
if (isProduction) {
args[0].cdn = cdn.build
} else {
args[0].cdn = cdn.dev
}
return args
})
config.plugin('speed')//添加
.use(SpeedMeasureWebpackPlugin)//添加
}
})
安装webpack-bundle-analyzer插件可以看打包后包的大小以及依赖
// package.json
{
"name": "dll-vue",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"report": "vue-cli-service build --report",//添加
}
}
npm run report 之后，dist目录下就多了一个report.html文件，打开就可以看到我们包的大小
去除console.log打印以及注释
安装插件 npm install uglifyjs-webpack-plugin --save-dev
