vue工程部署到nginx首次加载过慢&&

最新推荐文章于 2024-10-07 11:47:20 发布

lileLife

最新推荐文章于 2024-10-07 11:47:20 发布

阅读量3.8k

点赞数

分类专栏： fronted

本文链接：https://blog.csdn.net/lileLife/article/details/103517037

版权

fronted 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

使用 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 compression-webpack-plugin@1.0.0 //安装低版本

然后重新打包

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/vue@2.5.17/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~

浏览器访问网页加快