Vue项目的打包\部署\优化
如果有帮助到你 麻烦点个赞或者 收藏 +关注 哟
以后会经常发布一些干货文章
我只是一个前端小菜鸟,大佬勿喷!
一、nginx 开启 gzip
理论上,nginx 开启 gzip 成功后,文件大小应该小很多,如果你发现你的 js,css 文件没有开启 gzip 需要配置下 nginx 服务,开启 gzip
server{
listen 80;
server_name crazyhao.cn;
# 开启gzip
gzip on;
gzip_vary on;
gzip_min_length 1000;
gzip_comp_level 2;
gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml image/jpeg image/gif image/png application/javascript;
location / {
#root /root/dist/;
root html;
try_files $uri /index.html;
index index.html index.htm;
}
}
二、使用 Vue cli report 分析
1、在package.json文件里面加上一句话
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"report": "vue-cli-service build --report" // 加入这一行
},
根据上面的配置后,运行 npm run report 后,会在 build 的同时,在 dist 目录会生成一个 report.html,打开后如下图,我们可以看到谁占用较大,直接打包了 node_modules 里面框架的内容。
2、软后就可以选择通过 外部引用cdn 的方法进行优化
外部引入需要配置两个地方:
1.在 vue.config.js 的 configureWebpack.externals 加入需要外部使用的包
2.在 public/index.html 里引入对应的包
栗子:
// vue.config.js
module.exports = {
configureWebpack: {
externals: {
echarts: "echarts",
}
}
};
<!-- public/index.html -->
<!-- 写在 head 最下面或 body 最下面 -->
<!-- cdn 外部引入 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.min.js"></script>