基于Webpack4的Vue移动端开发环境-优化篇

CookiePool
3,003 阅读6分钟

序言

本文章上接搭建篇，因为篇幅原因，我把优化单独放一篇文章来讲。

基于Webpack4的Vue移动端开发环境-搭建篇

代码我都上传到了github，有需要的自取。Webpack-Vue-Mobile

大佬绕路轻喷

很多时候做开发都会使用UI组件库，这些组件库一般都会有按需加载的功能，这里我选择vant组件库来测试。手头暂时没有可以演示的项目，可能有点纯理论感觉，但是应该能大家一个优化的思路。我会在测试项目里面写一些测试页面，到时上传到github供大家参考！

  • 注意： 经过我前面的一些实践，这儿有事情需要告知

    • 1、如果开发环境和生产环境都使用插件把CSS分离出来成为单独的文件，那么你在开发过程中会发现热更新对CSS不生效，所以解决方法就是分离CSS仅配置在生产环境。给大家埋了个坑！

开始

1、组件库按需加载

安装vant

npm install vant

安装完毕后，我们先使用官网的全局导入所有组件

  • 全局导入所有组件
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

然后你到页面使用几个组件，比如Button，Dialog这些，运行npm run dev命令，这时发现报错了，说Module parse failed: Unexpected character '@'，这是因为我们引入vant时，引入了css文件，但是我们的webpack并没有配置处理css的loader，所以加上即可：

{
  test: /\.css$/,
  // 这儿组件库的css一般都是处理过的，我们使用一般的loader即可
  use: [
    {
      loader: 'style-loader',
    },
    {
      loader: 'css-loader',
    }
  ]
}

这样我们就能运行并加入相关组件了，这里我们不演示组件使用，而是直接打包展示结果分析图：

1.png

我们可以看见那个硕大的index.css，也就是说你没用到的组件它也把样式这些都弄进来了。

  • 按需加载 使用按需加载需要使用到一个插件叫babel-plugin-import。
npm install babel-plugin-import -D

安装完毕后在babel.config.js里面配置：

// 按需加载vant组件
plugins: [
  ["import", {
    libraryName: 'vant',
    libraryDirectory: 'es',
    style: true
  }, 'vant']
]

这样你在main.js里面这样引入即可：

// 按需注册vant组件
import { Button } from 'vant';
Vue.use(Button);

你使用了什么组件就注册什么组件，目前社区上的许多ui组件库都是支持按需加载的，有的话一定要使用这种方式。

2.png

这下看下，比刚才全部引入好多了，额。。main.js硕大应该是未分离所有东西打包到一起的原因-_-!。

2、路由懒加载

使用路由懒加载，在页面访问到是再加载对应的资源，提升首页访问的速度。 在这之前，我们还需要一个babel插件来实现这个功能

npm install @babel/plugin-syntax-dynamic-import -D

安装完毕后，在webpack里面babel-loader配置加上以下代码：

{
  test: /\.jsx?$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        // 使用vue官方的懒加载语法并结合babel需使用这个插件，不然会报错
        plugins: ["@babel/plugin-syntax-dynamic-import"]
      }
    }	
  ]
}

然后我们现有的路由里面引入组件的写法需要改变下，比如你现在是这么写的：

import Home from '../views/Home.vue';
import RouterTest from '../views/RouterTest.vue';
import VantTest from '../views/VantTest.vue';

改成下面的写法：

//官方的懒加载方案，需要在webpack.config.js中配置@babel/plugin-syntax-dynamic-import这个插件，否则babel不支持以下语法会报错。
//下面的注释语法是打包生成的js的文件名，如果你想某几个组件打包到同一个文件，那么它们的注释语法的webpackChunkName的名字相同即可
const MainPage = () =>
  import(/* webpackChunkName: "group-foo" */ "./views/MainPage.vue");
const ComOne = () =>
  import(/* webpackChunkName: "group-foo" */ "./views/ComOne.vue");
const ComTwo = () =>
  import(/* webpackChunkName: "group-foo" */ "./views/ComTwo.vue");

这样处理后你会发现你在切换路由时会加载额外的js文件，这样我们就分离了出来按需加载，打包分析图如下：

3.png

这里可以发现一个问题，我们很多包都重复打了，接下来就是去除重复打包。所以我们要提取公共代码。

3、提取公共代码

在webpack3的时候，我们可以借助CommonsChunkPlugin来实现，webpack4已经移除了这个插件，在webpack4中可以用splitChunks。

如果你在使用webpack4的时候没有做optimization.splitChunks的配置，那么它会有一个默认配置，官方文档的代码块：

module.exports = {
  ...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
  ...
}

大多数情况我们需要自己配置cashGroups这个参数，也就是自定义拆分组，这里我参考了社区大佬的配置，然后优化了下：

optimization: {
  splitChunks: {
    cacheGroups: {
      // node_modules下的模块拆分到chunk-vendors.xxxx.js下
      vendors: {
        name: 'chunk-vendors',
        test: /[\\\/]node_modules[\\\/]/,
        priority: -10,
        chunks: 'all'
      },
      // 自己定义的公告组件超过两次引用的放在chunk-common.xxxx.js下
      common: {
        name: 'chunk-common',
        minChunks: 2,
        priority: -20,
        chunks: 'all',
        reuseExistingChunk: true
      }
    }
  }
}

一开始，chunks的属性值都是initial，然后我们看一下打包分析图：

4.png

可以看到分离的js文件都打包了一次core.js文件，所以我把chunks参数值改为all，再来看分析图：

5.png

这样，就没有重复打包了。

4、补充splitChunks相关知识

在翻阅了社区上的一些文章后（官方文档对于我这个菜鸡来说看不出来什么-_-），在此还是做一个总结。

4.1、参数解释

  • chunks 有all、async和initial三个值，async表示只从异步加载得模块（动态加载import()）里面进行拆分 initial表示只从入口模块进行拆分 all表示以上两者都包括。

  • automaticNameDelimiter 打包拆分出来文件名的连接符，一般都是~。

  • maxAsyncRequests 按需加载时的最大并行请求数。

  • maxInitialRequests 入口并行加载的最大请求数。

  • minChunks 当应用次数超过多少次时会打包到单独的块，一般都是2。

  • minSize 生成块的最小大小(以字节为单位)。

  • maxSize 这个有点复杂，暂时说不清。#手动捂脸

  • name 分割的块名。

  • cashGroups 缓存组，这个可以自己来指定你的拆分规则，同时它的参数跟上面一样，声明了的话就是覆盖，否则就是继承，同时它还有几个独有的选项

    • test 匹配规则，一般使用正则表达式。
    • priority 权值，默认的优先权值为0，你可以设置负值来比默认的权限高。
    • reuseExistingChunk 如果当前块包含已经从主包中分离出来的模块，那么它将被重用，而不是生成一个新的块。

这里有几篇文章供大家参考： 链接1 链接2 链接3

4.2 结合runtimeChunk选项

关于这个参数的作用，我引用思否大佬的一个回答：

优化持久化缓存的, runtime 指的是 webpack 的运行环境(具体作用就是模块解析, 加载) 和 模块信息清单, 模块信息清单在每次有模块变更(hash 变更)时都会变更, 所以我们想把这部分代码单独打包出来, 配合后端缓存策略, 这样就不会因为某个模块的变更导致包含模块信息的模块(通常会被包含在最后一个 bundle 中)缓存失效。optimization.runtimeChunk 就是告诉 webpack 是否要把这部分单独打包出来。链接

就是说呢那些不会经常变的runtime把它单独提出来，不需要频繁的产生变化，用来优化后端的缓存策略。

那么在webpack的配置文件加上这句：

optimization: {
  runtimeChunk: true,
  splitChunks: {
    ......
  }
}

设置好后，我们打包出来试一试看相比于上面的配置会有哪些区别：

6.png

这下你发现main.js进一步减小了，把里面的部分内容放到了runtime~main下面。

5、其它优化方法

如果还想进一步减小包的体积，除了你的图片媒体资源这些使用oss外。你的第三方库也可以使用cdn分发网络，比如我的公司项目的axios，vue，better-scroll这些都使用了cdn分发的方式，而不是直接导入到包里面一起打包。 在你的index.html入口页面下以这种方式加入

<script src="https://static.XXXXXX.com/12static/new/js/vue.min.js"></script>
<script src="https://static.XXXXXX.com/12static/new/js/vue-router.js"></script>
<script src="https://static.XXXXXX.com/12static/new/js/axios.min.js"></script>
<script src="https://static.XXXXXX.com/12static/new/js/bscroll.min.js"></script>

这里给大家推荐一个开源的第三方cdn分发网络：BootCDN

最后

暂时到这里总结就结束了，但是优化的脚步不会停，我这儿的优化都是比较基本的优化，肯定还有许多点没有总结到，后期若有使用到的好的优化方法，会持续更新，若文章有错误，还请多多指正！

avatar
文章
阅读
粉丝