一、生成打包报告
- 在 package.json 的scripts下面配置
vue-cli-service build --report
- 通过 vue-cli 的命令选项可以生成打包报告
- --report 选项可以生成 report.html 以帮助分析包内容
一、打开可视化图形界面
- 通过 vue ui 打开可视化图形界面
二、创建入口文件
- 在src创建 main-dev.js 开发环境入口文件
- 在src创建 main-prod.js 生产环境入口文件
三、在vue.config.js中引入外部资源优化项目
chainWebpack: (config) => {
//生产模式
config.when(process.env.NODE_ENV == "production", (config) => {
config.entry("app").clear().add("./src/main-prod.js");
//设置一个全局变量，在index.html中用来区分生产环境和开发环境
config.plugin("html").tap((args) => {
args[0].isProd = true;
return args;
});
//使用外部资源文件
config.set("externals", {
vue: "vue",
"vue-router": "VueRouter",
axios: "axios",
lodash: "_",
echarts: "echarts",
nprogress: "NProgress",
"vue-quill-editor": "VueQuillEditor"
});
});
//开发模式
config.when(process.env.NODE_ENV == "development", (config) => {
config.entry("app").clear().add("./src/main-dev.js");
config.plugin("html").tap((args) => {
args[0].isProd = false;
return args;
});
});
},
四、在public/index.html 使用外部资源优化项目
- 通过isProd区分开发环境和生产环境。如果是生产环境，则加载CDN。如果是开发环境，则不接在CDN文件。
<% if(htmlWebpackPlugin.options.isProd){ %>
<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
<!-- <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script> -->
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.12/theme-chalk/index.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.12/index.js"></script>
<% } %>
五、为什么使用外部资源优化
- 在main-prod.js中，注释掉element-ui按需加载的代码
- 在index.html的头部区域中，通过CDN加载element-ui的js和css样式
- vue.config.js文件，用来修改webpack的配置项
- configureWebpack和chainWebpack，来自定义webpack的打包配置
- configureWebpack和chainWebpack的作用完全相同
- configureWebpack：通过操作对象的形式来修改入口文件
- chainWebpack：通过链式编程的形式来修改入口文件
-
设置变量isProd
- 在开发环境下，通过import来引入依赖。
- 在生产环境下，不使用import引入依赖，而是通过cdn来引入各种依赖，这样可以减小打包后依赖的体积。
- bootCDN：https://www.bootcdn.cn/ cdn开源库
六、清除console.log 优化项目
安装依赖：npm i babel-plugin-transform-remove-console --save-dev
- 在 babel.config.js 中使用插件
const proPlugins = [];
//如果是开发环境，则添加 transform-remove-console 插件
if (process.env.NODE_ENV == "production") {
proPlugins.push("transform-remove-console");
}
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [...proPlugins],
};
七、路由懒加载优化项目
依赖包：npm i @babel/plugin-syntax-dynamic-import
- babel官网：https://babel.docschina.org/
- 在babel.config.js配置文件中声明该插件
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [...proPlugin,'@babel/plugin-syntax-dynamic-import'],
}
- 将路由改为按需加载的形式，示例代码如下：
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
八、开启gzip压缩
- 使用gzip减少文件体积，使传输速度更快
- 新建一个文件夹 在里面新建一个 app.js文件
- 通过 npm init -y 初始化 生成package.json 文件
- 在app.js中配置
const express=require("express")
const compression=require("compression") //导入包
const app=express()
app.use(compression()) //启用中间件 //这个在前
app.use(express.static('./dist')) //这个在后
app.listen(80,()=>{ //端口
console.log("--80--")
})
- 下载服务端安装包
npm i express compression
- 将项目中打包后的 dist 文件复制到我们的app.js同级文件夹中
- 登录我们的宝塔服务器 在文件里面新建一个文件夹放入
- 在宝塔的安全里面 添加端口与app.js中的端口对应
- 在宝塔的网站里面新建Node项目 如果没添加过按提示进行下载一下插件
10.
九、其他
开启使用Nprogress进度条
1. 下载依赖：npm install --save nprogress
- 引入依赖：
import Nprogress from "nprogress";
import "nprogress/nprogress.css";
- 使用依赖
在请求拦截器中显示进度条 `Nprogress.start()`
在响应拦截器中隐藏进度条 `Nprogress.done();`
vscode格式化不换行
- 在与vue.config.js同级中创建 prettierrc.json 文件
- 配置：
{
"printWidth":200 //多少字换行
}
