前端项目打包体积优化

·  阅读 1288

项目部署

项目部署后个人用户购买的云服务器(配置低),带宽通常只有 1M~2M。若是生成的资源文件体积过大会导致加载缓慢。没有使用 gzip 时文件大小为 2M 左右,以 1M 的带宽 128kb/s 加载时长要近 20s没有使用gzip之前的vendors 下面是我自己在项目优化过程中的一点经验。

打包体积优化

路由懒加载

vue 中使用

 {
    path: "/home",
    name: "Home",
    component: () => import("views/home/Home.vue"),
    meta: {
      title: "s.kr",
    },
    children: [
      {
        path: "/service",
        component: () => import("components/common/adside/Service"),
      },
    ],
  },
复制代码

react 中使用 lazy 函数懒加载

import React, { Component,lazy,Suspense} from 'react'

//1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包
const Home = lazy(() => import('views/home/Home.vue'))

//2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面
<Suspense fallback={<>loading.....</>}>
  <Switch>
    <Route path="/home" component={Home} />
    <Redirect to="/home" />
  </Switch>
</Suspense>
// fallback也可加载一个外部组件。如:fallback={<Loading />},但Loading组件不能用lazy()加载

复制代码

不生成 map 文件

去掉打包生成的.map 文件,以 vue 项目为例,设置 vue.config.js 中的productionSourceMap:false,运行·yarn build后发现不会生成的.map 了。解释一下.map 就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。 项目打包后,代码都是经过压缩加密的,如果没有.map 文件运行时报错,输出的错误信息无法准确得知是哪里的代码报错。 webpack配置

使用 gzip

使用 compression-webpack-plugin 插件,yarn add compression-webpack-plugin -D,按如下配置

const CompressionWebpackPlugin = require("compression-webpack-plugin");
//...
module.exports = {
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "production") {
      config.plugins.push(
        new CompressionWebpackPlugin({
          filename: "[path].gz[query]", //3.0以上版本使用fileName,低版本为assets
          algorithm: "gzip",
          test: /\.(js|css)$/,
          threshold: 10240, // 达到10kb的静态文件进行压缩 按字节计算
          minRatio: 0.8, // 只有压缩率比这个值小的资源才会被处理
          deleteOriginalAssets: false, // 是否删除压缩的源文件
        })
      );
    }
  },
};
//...
复制代码

此时再运行 build 后可以看到生成的文件中多了以.gz 后缀名的文件。这个时候还需要在云服务器上的 nginx 配置vim /etc/nginx/nginx.conf中开启 gzip。配置可以直接拿去用。

    #开启gzip
    gzip on;
    #不压缩临界值,大于1K的才压缩
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    #用了反向代理的话,末端通信是HTTP/1.0,默认是HTTP/1.1
    #gzip_http_version 1.0;
    #压缩级别,1-10,数字越大压缩的越好,开启与不开启差别较大,开启了之后1~9影响不明显。建设设置为4或者5
    gzip_comp_level 5;
    #进行压缩的文件类型JavaScript有两种写法,最好都写上吧,总有人抱怨js文件没有压缩,其实多写一种格式application/javascript 就行了
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    #跟Squid等缓存服务有关,on的话会在Header里增加"Vary: Accept-Encoding"
    gzip_vary off;
    #IE6对Gzip不怎么友好,不给它开Gzip了
    gzip_disable "MSIE [1-6]\.";
复制代码

配置完成后检查配置nginx -t(不使用是重载配置也会有错误提示)提示成功后重新载入配置nginx -s reload。 打开项目地址在资源的响应头中中查看 gzip 是否开启gzip是否开启 此时该文件大小为 500kb 左右,请求时长 4~5ssize

使用 bootcdn 提供的 cdn

我们可以使用webpack-bundle-analyzer插件查看各个依赖包所占的体积,运行 build 后在浏览器展示结果

const CompressionWebpackPlugin = require("compression-webpack-plugin");
//...
module.exports = {
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "production") {
      config.plugins.push(
        new CompressionWebpackPlugin({
          filename: "[path].gz[query]", //3.0以上版本使用fileName,低版本为assets
          algorithm: "gzip",
          test: /\.(js|css)$/,
          threshold: 10240, // 达到10kb的静态文件进行压缩 按字节计算
          minRatio: 0.8, // 只有压缩率比这个值小的资源才会被处理
          deleteOriginalAssets: false, // 是否删除压缩的源文件
        }),
        new BundleAnalyzerPlugin({
          analyzerMode: "server",
          generateStatsFile: true,
          statsOptions: { source: false },
        })
      );
    }
  },
};
//...
复制代码

我们发现 ant-design 占用了 147kbsize 在 bootcdn www.bootcdn.cn/ 找到对应版本的 antd 依赖包的文件,顺便将 vue,vuex,vue-router 也优化掉。 以 vue 为例 在 main.js 取消引用,或者在 webpack 打包时忽略这些依赖包

//key为包名,value为引入的名称
externals = {
  vue: "Vue",
  "vue-router": "VueRouter",
  vuex: "Vuex",
};
复制代码

在 public/index.html 中添加对应版本的依赖包的 script 链接

<link
  href="https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.7.4/antd.min.css"
  rel="stylesheet"
/>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.4/vue-router.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.5.1/vuex.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.7.4/antd.min.js"></script>
复制代码

此时运行 build 后文件大小只有 200kb,项目就会很快的加载完成了。 size size 优化后的项目地址 我的主页欢迎浏览

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改