vue工程部署到nginx首次加載過慢&&

使用 npm run build 打包的dist文件包含太大的jpg 或者js ，像render...js 所以放置在nginx後，瀏覽器打開過慢。

可以使用如下方法：

一、使用gzip壓縮解壓：

使用 vue自帶的productionGzip 功能，生成gzip代替原來的js等，節省好幾倍的內容。然後nginx也是去解壓gzip。具體如下：

1、vue工程下的 config目錄下index.js

productionGzip: true //原來爲false

然後安裝 compression

npm install --save-dev compression-webpack-plugin

安裝完了就從新npm run build 打包。

但可能會打包錯誤，因爲compression的版本比node的低

所以可以：

npm install --save-dev [email protected] //安裝低版本

然後重新打包

2、第二步配置ngInx 的nginx.conf

cd /usr/local/nginx/conf

vi nginx.conf

在http內容中添加：

 gzip  on; #開啓或關閉gzip on off
    gzip_static on;#是否開啓gzip靜態資源
  gzip_disable "msie6"; #不使用gzip IE6
  gzip_min_length 100k; #gzip壓縮最小文件大小，超出進行壓縮（自行調節）
  gzip_buffers 4 16k; #buffer 不用修改
  gzip_comp_level 3; #壓縮級別:1-10，數字越大壓縮的越好，時間也越長
  gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; #  壓縮文件類型
  gzip_vary off;  #跟Squid等緩存服務有關，on的話會在Header裏增加 "Vary: Accept-Encoding"

隨後重啓nginx，

但會遇到沒有gzip_static 的情況如下：

需要增加該模塊

進入 nginx 的解壓後的安裝包的 configure 下

cd /usr/local/tools/nginx-1.6.2

./configure --with-http_gzip_static_module

make

make install

然後重啓nginx 。

如果還不行，就在

nginx.conf文件的 gzip_static on; 下再加上

gzip_http_version 1.0;

方法二：對app.js和vendor.js進行瘦身

在項目工程中的 index.html 使用cdn引入第三方依賴

 <body>
10     <div id="app"></div>
11     <!-- built files will be auto injected -->
12     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
13     <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
14     <!-- import stylesheet -->
        <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
        <!-- import iView -->
        <script src="//unpkg.com/iview/dist/iview.min.js"></script>

16   </body>

去除 main.js中 import 和use

配置 webpack ：

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    ....
  },
  externals: {
    // 要引入的資源的名字：該模塊提供給外部引用的名字(由對應的庫自定)
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'iview':'iview'
  },

重新打包

而對於靜態圖片獲取太慢可以修改爲使用http請求獲取

data:

imgurl: 'http://chuantu.xyz/t6/704/1576205013x2073530527.jpg'

圖片外鏈獲取：

https://blog.csdn.net/lileLife/article/details/103210560

over~

瀏覽器訪問網頁加快