一. 目标

分模块打包
使用公共CDN加载库文件
vue的现代打包模式
多页面项目实现
服务端渲染

二. 解决方案

1. 分模块打包

(1)业务代码分模块打包

分模块打包, 使用webpack的SplitChunkPlugin插件, 将代码分模块打包, 同时利用import()函数来实现懒加载, 做到只有响应页面被访问到的时候才加载响应的资源.

优点:

项目大的时候有效减小js文件大小
提高首屏加载速度

代码类似如下:

  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }

(2)第三方按需引入

此处以vant为例(vant-contrib.gitee.io/vant/v3/#/z…)

使用自动按需引入, babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

安装babel-plugin-import

npm i babel-plugin-import -D

在.babelrc 中添加配置：

// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    [
      "import",
      {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
      }
    ]
  ]
}

按需使用

// 插件会自动将代码转化为方式二中的按需引入形式
import { Button as VanButton, Cell as VanCell, CellGroup as VanCellGroup } from 'vant';

<van-button type="primary">主要按钮</van-button>
<van-cell-group>
   <van-cell title="单元格" value="内容" />
   <van-cell title="单元格" value="内容" label="描述信息" />
</van-cell-group>

2. 使用公共CDN加载库文件

使用公共CDN加载库文件,有效减小公共打包文件大小,同时提高加载速度 externals介绍: www.tangshuang.net/3343.html

1.配置vue.config.js文件使用webpack提供的externals属性,可以将不变的包文件剥离出bundle依赖,从而有效减小打包出来的文件大小,同时第三方CDN也能加速,进而加快页面加载.

在vue.config.js文件中,配置externals, 将类似vue,vue-router的库文件全部剥离出来.

const path = require('path');
module.exports = {
    chainWebpack: config => {
        // 非本地开发环境下的配置
        // 'vue-router'是库名称, VueRouter是库内暴露出来的全局变量
        if (process.env.NODE_ENV === 'production') {
            config.set('externals', {
                vue: 'Vue',
                'vue-router': 'VueRouter',
                lodash: '_'
            });
        }
    },
}

2.public/index.html中手动写入库文件 vue(3.0以上): cdn.bootcdn.net/ajax/libs/v…
vue-router: cdn.bootcdn.net/ajax/libs/v…
lodash: cdn.bootcdn.net/ajax/libs/l…

<!DOCTYPE html>
<html lang="">
  <head>
    ...
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.7/vue.global.prod.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.5/vue-router.global.min.js">
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script></script>
    <title>vue项目配置</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

3.vue的现代打包模式

vue-cli3提供现代打包模式, 可以生成更小的包, 运行速度更快, 同时兼容着旧浏览器.

vue-cli-service build --modern

4.多页面项目实现

实现详细介绍

5.服务端渲染

使用Nuxt.js完成

js配置, 分模块打包, 体积优化