代码分割：SplitChunksPlugin 配置参数相关

（一）魔法注释

在平时的项目中，经常会看见这样的代码，在配置路由里面

const Home = () => import(/* webpackChunkName: 'Home' */ '@/views/Home/Home.vue')
const Mine = () => import(/* webpackChunkName: 'Mine' */ '@/views/Mine/Mine.vue')
const Detail = () => import(/* webpackChunkName: 'Detail' */ '@/views/Detail/Detail.vue')
const Submit = () => import(/* webpackChunkName: 'Submit' */ '@/views/Submit/Submit.vue')
const RefundDetail = () => import(/* webpackChunkName: 'RefundDetail' */ '@/views/RefundDetail/Index.vue')
const config = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }, {
    path: '/mine',
    name: 'Mine',
    component: Mine
  }, {
    path: '/submit',
    name: 'submit',
    component: Submit
  }, {
    path: '/detail',
    name: 'detail',
    component: Detail
  }, {
    path: '/RefundDetail',
    name: 'RefundDetail',
    component: RefundDetail
  }
]

export default config

Vue中运用【import的懒加载语句】以及【webpack的魔法注释】，在项目进行webpack打包的时候，对不同模块进行代码分割，在首屏加载时，用到哪个模块再加载哪个模块，实现懒加载进行页面的优化。

魔法注释的作用就是 webpack在打包的时候，对异步引入的库代码进行代码分割时（需要配置webpack的SplitChunkPlugin插件），为分割后的代码块取得名字

（二）配置

main.js：按需引入组件

async function getComponent() {
  const lodash  = await import(/* webpackChunkName: 'lodash' */'lodash')
  var element = document.createElement('div');
  element.innerHTML = lodash.isEmpty(null)
  return element;
}

document.addEventListener('click', () => {
  /* 当点击时才加载lodash */
  getComponent().then(element => {
    document.body.appendChild(element);
  })
})

点击时候才引入 vendors~lodash.fd26d44d5f0f2be61c8e.js 这个js文件

打包后的文件名为vendors~lodash.fd26d44d5f0f2be61c8e.js。若想打包过后的文件名不带vendors~前缀，可以修改webpack.common.js中optimization配置项，

optimization: {
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        vendors: false,
        default: false
      }
    }
  }

再次打包：没有前缀了

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>webpack test</title>
</head>

<body>
  <div id="app"></div>
  <script src="main.7316c35c9a7ebc2c1b5f.js"></script>
</body>

</html>

其实 html 只引入了一个js

配置参数详解：

splitChunks: {
  // all/async: all 是对所有代码分割 async是对异步代码分割（多用于组件引入）
  // 如果设置了async，组件同步引入，不会分割打包，全都打包在 main.js
  chunks: 'async',
  minSize: 0,  // 引入模块大于minSize（kb）才进行代码分割
  maxSize: 1, // 如果打包好的js大于maxSize（kb）,则会进行二次分割
  minChunks: 1, // 引入模块至被使用minChunks(次)后才进行代码分割
  maxAsyncRequests: 5, // 同时加载的模块数不超过maxAsyncRequests， 如果超过 maxAsyncRequests， 剩余的模块不做代码分割
  maxInitialRequests: 3, // 入口文件同时加载的模块数不超过 maxInitialRequests
  automaticNameDelimiter: '~', // 生成文件名称的链接符号 如 vendors~main.js
  name: true,
  // 根据 cacheGroups，判断分割到哪里去
  // 如果是 node_modules 里的，打包到vendors.js 里
  cacheGroups: {
    vendors: {
      test: /[\\/]node_modules[\\/]/,
      priority: -10, // 优先级 
      filename: 'vendors.js' // 打包文件名称
    },
    // 除了 node_modules 里的，放到 common.js 里
    default: {
      minChunks: 2,
      priority: -20,
      filename: 'common.js',
      reuseExistingChunk: true // 是否复用已打包代码
    }
  }
}
}

代码分割：SplitChunksPlugin 配置参数相关

猜你喜欢