vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue-cli3 打包优化

vue-cli3 打包优化之 splitchunks详解

作者:DongFuPanda

这篇文章主要介绍了vue-cli3 打包优化之 splitchunks的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

vue-cli3 打包优化之 splitchunks

Dllplugin 可以把常用库抽离出来,包括 vue,vuex之类的库。但是 ant design vue 是按需加载,且随时有可能引入新的组件,显然不适合放进 dll 中。直接和其他文件打进 vendor.js 有会很大,所以需要将其再单独抽离出来,我决定在 config.optimization.splitChunks 配置如下:

const IS_PROD = process.env.NODE_ENV === 'production'
module.exports = {
  chainWebpack(config) {
    if (IS_PROD) {
      config.optimization.splitChunks({
        cacheGroups: {
          common: {
            name: 'chunk-common', // 打包后的文件名
            chunks: 'initial', // 
            minChunks: 2,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 1,
            reuseExistingChunk: true
          },
          vendors: {
            name: 'chunk-vendors',
            test: /[\\/]node_modules[\\/]/,
            chunks: 'initial',
            priority: 2,
            reuseExistingChunk: true,
            enforce: true
          },
          antDesignVue: {
            name: 'chunk-ant-design-vue',
            test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/,
            chunks: 'initial',
            priority: 3,
            reuseExistingChunk: true,
            enforce: true
          }
        }
      })
    }
  }
}

关于 webpack4 的 splitChunks 还是有很多知识需要了解的,下文将进行简要的介绍。

splitChunks 常用参数

vue cli3安装教程

Vue CLI 3是一个基于Vue.js的标准化工具,用于快速构建Vue.js项目。它的安装非常简单,本文将介绍如何安装Vue CLI 3。

首先,我们需要确保已经安装了Node.js和npm。如果您还没有安装,请先下载并安装Node.js,然后npm也将自动安装。

接下来,我们可以使用以下命令安装Vue CLI 3:

npm install -g @vue/cli

这将全局安装Vue CLI 3,以后就可以在任何位置使用Vue CLI 3来创建Vue.js项目了。

安装完成后,您可以使用以下命令检查是否成功安装了Vue CLI 3:

vue --version

如果成功安装,则您应该能够看到Vue CLI 3的版本号。

现在,我们已经成功安装了Vue CLI 3,可以使用它来创建新的Vue.js项目了。您可以使用以下命令创建一个新的Vue.js项目:

vue create my-project

这将创建一个名为“my-project”的新Vue.js项目,并在其中初始化所有必需的文件和依赖项。

以上就是安装Vue CLI 3的简单教程。如果您想要更深入地了解Vue CLI 3的详细用法和功能,请查看Vue CLI 3的官方文档。

到此这篇关于vue-cli3 打包优化之 splitchunks的文章就介绍到这了,更多相关vue-cli3 打包优化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文