Vue项目的打包\部署\优化

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>