V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
waiaan
V2EX  ›  Vue.js

请教一个 vue cli 3.0 打包代码分割的问题

  •  
  •   waiaan · 2019-07-30 10:48:35 +08:00 · 5392 次点击
    这是一个创建于 1928 天前的主题,其中的信息可能已经有所发展或是发生改变。

    vue.config.js 中的 pages 如下:

    pages: {
        maker: {
          entry: 'src/pages/maker/maker.js',
          template: 'public/maker.html',
          filename: 'maker.html'
        },
        view: {
          entry: 'src/pages/view/view.js',
          template: 'public/view.html',
          filename: 'view.html'
        },
        login: {
          entry: 'src/pages/login/login.js',
          template: 'public/login.html',
          filename: 'login.html'
        }
      }
    

    三个页面互相独立不影响,但都在一个项目里。打包后生成的 js 文件如下:

      dist\js\chunk-vendors.b03a24ab.js       2853.68 KiB       838.60 KiB
      dist\js\chunk-d5f92168.ec610990.js      2124.45 KiB       637.19 KiB
      dist\js\maker.c5308f56.js               271.34 KiB        47.67 KiB
      dist\js\chunk-common.a7b29839.js        13.36 KiB         4.30 KiB
      dist\js\login.5e7632f4.js               6.74 KiB          3.43 KiB
    

    求问如下:

    1、如何配置让打包后的 js 文件小于 2m ;

    2、假如要分开打包,即每个页面都是单独的 js 文件(且分割代码),需如何配置?

    谢谢!

    2 条回复    2019-07-30 16:07:08 +08:00
    mrcotter2013
        1
    mrcotter2013  
       2019-07-30 15:03:41 +08:00
    第一个问题,不用很在意大小,超了也没什么关系。如果还要细分 vendors,可以考虑把占用空间较大的 module 提取出来,例如 ui kit。

    第二个问题,一个可行的方案:

    * VueCLI 3 默认 build 会生成:`chunk-vendors`, `chunk-common` 和 `{pagename}`,如果要分离每个 page 的代码,你需要将其手动加入到你的 pages object 中:


    ```
    pages: {
    maker: {
    entry: 'src/pages/maker/maker.js',
    template: 'public/maker.html',
    filename: 'maker.html',
    chunks: ['chunk-common', 'chunk-maker-vendors', 'maker']
    },
    view: {
    entry: 'src/pages/view/view.js',
    template: 'public/view.html',
    filename: 'view.html',
    chunks: ['chunk-common', 'chunk-view-vendors', 'view']
    },
    login: {
    entry: 'src/pages/login/login.js',
    template: 'public/login.html',
    filename: 'login.html',
    chunks: ['chunk-common', 'chunk-login-vendors', 'login']
    }
    }
    ```

    之后,在 `module.exports` 中配置 `chainWebpack`:

    ```
    chainWebpack: config => {
    const IS_VENDOR = /[\\/]node_modules[\\/]/
    config.optimization.splitChunks({
    cacheGroups: {
    maker: {
    name: `chunk-maker-vendors`,
    priority: -11,
    chunks: chunk => chunk.name === 'maker',
    test: IS_VENDOR,
    enforce: true,
    },
    view: {
    name: `chunk-view-vendors`,
    priority: -11,
    chunks: chunk => chunk.name === 'view',
    test: IS_VENDOR,
    enforce: true,
    },
    login: {
    name: `chunk-login-vendors`,
    priority: -11,
    chunks: chunk => chunk.name === 'login',
    test: IS_VENDOR,
    enforce: true,
    },
    common: {
    name: 'chunk-common',
    priority: -20,
    chunks: 'initial',
    minChunks: 2,
    reuseExistingChunk: true,
    enforce: true,
    }
    }
    })
    }
    ```

    如果回复不支持 markdown,代码格式就没办法了,将就看。
    waiaan
        2
    waiaan  
    OP
       2019-07-30 16:07:08 +08:00
    @mrcotter2013
    非常感谢。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   960 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 20:50 · PVG 04:50 · LAX 12:50 · JFK 15:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.