一、生成打包分析文件
1、package.json 中配置 report 命令
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"report": "vue-cli-service build --report"
}2、终端运行命令
npm run report // 打包并生成分析文件3、查看打包后的 dist 文件夹
可以看到多了一个 report.html 文件
4、双击打开 report.html 文件
可以看到打包后的每个文件的大小，每个文件都生成了哪些模块代码，以及不同模块的大小
二、路由懒加载
import Vue from 'vue'
import Router from 'vue-router'
import index from '@/views/index.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: "index",
// 1. 普通引用
component: index
// 2. 路由懒加载
component: resolve => require(['@/views/index.vue'], resolve)
// 3. 路由懒加载，并且命名chunk名字
component: () => import(/* webpackChunkName: 'index' */ '@/views/index.vue')
}
]
});三、外部引入模块
1、 将公共包放入 public 文件夹
2、 在 index.html 中引入公共包 js
<!DOCTYPE html>
<html lang="en">
<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, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="<%= BASE_URL %>css/vuetify.min.css">
<title>index</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="<%= BASE_URL %>js/vue.min.js"></script>
<script type="text/javascript" src="<%= BASE_URL %>js/vuetify.min.js"></script>
<script type="text/javascript" src="<%= BASE_URL %>js/vuex.min.js"></script>
<script type="text/javascript" src="<%= BASE_URL %>js/vue-router.min.js"></script>
<script type="text/javascript" src="<%= BASE_URL %>js/axios.min.js"></script>
<script type="text/javascript" src="<%= BASE_URL %>js/moment.min.js"></script>
</body>
</html>3、在 vue.config.js 中配置 externals
configureWebpack: (config) => {
// production：生产环境，development：开发环境
config.mode = process.env.NODE_ENV
config.externals = {
// key：vue是项目里引入时候要用的，value：是开发依赖库的主人定义的不能修改
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
"vuetify": "vuetify",
"moment": "moment",
}
}4、注释公共包的引用
// import Vue from 'vue' // 注释或删除代码
// import Router from 'vue-router' // 注释或删除代码
import index from '@/views/index.vue'四、开启 gzip 压缩
1、安装 compression-webpack-plugin
cnpm i -D compression-webpack-plugin2、在 vue.config.js 中配置
const CompressionPlugin = require('compression-webpack-plugin');
configureWebpack: (config) => {
config.plugins = [
...config.plugins,
new CompressionPlugin({
test: /\.js$|\.html$|\.css/,
threshold: 10240,
deleteOriginalAssets: false
})
]
}3、服务器端开启 gzip
Nginx服务器配置：
server {
gzip on;
gzip_buffers 4 16K;
gzip_comp_level 5;
gzip_min_length 100k;
gzip_types text/plain application/x-javascript application/javascript application/json text/css application/xml text/javascript image/jpeg image/gif image/png;
gzip_disable "MSIE [1-6\]\.";
gzip_vary on;
}
gzip on|off; // 是否开启gzip
gzip_min_length 100k; // 压缩的最小长度(再小就不要压缩了,意义不在)
gzip_buffers 4 16k; // 缓冲(压缩在内存中缓冲几块? 每块多大?)
gzip_comp_level 5; // 压缩级别(级别越高,压的越小,越浪费CPU计算资源)
gzip_types text/plain; // 对哪些类型的文件用压缩 如txt,xml,html,css,js等
gzip_vary on|off; // 是否传输gzip压缩标志
五、打包去掉console.log
1、安装 babel-plugin-transform-remove-console
cnpm install babel-plugin-transform-remove-console --save-dev2、修改 babel.config.js 文件
let plugins = []
if (process.env.NODE_ENV === 'production') {
plugins.push("transform-remove-console")
}
module.exports = {
presets: ["@vue/app"],
plugins
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。