vue cli3 构建多页面应用 splitChunks拆分后启动项目页面没渲染出来。

Question

vue cli3  构建多页面应用  splitChunks拆分后启动项目页面没渲染出来。有一个这样的警告（The resource http://xx.xx.xx.xx:xxxx/js/chunk-element-ui.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.），求问题解决办法及原因。

Answer 1

给多分页应用的每一个分页都添加 chunks ，并且每个chunks必须包含前三个 chunks:[分页名,'chunk-vendors','chunk-common']
如下例子:(特别是chunk-common 一定要加)

const sameChunks = [
  'chunk-vendors',
  'chunk-common',
  'chunk-ui',
  'chunk-pdfjs',
  'chunk-lodash',
  'chunk-moment',
  'chunk-html2canvas',
  'chunk-jspdf',
]
let PAGES = {
  index: {
    // page的入口
    entry: 'src/benchs/index/main.js',
    // 模板来源
    template: 'public/index.html',
    // 在dist/index.html的输出
    filename: 'index.html',
    // 当使用title选项时
    // template中的title标签需要<title><%= htmlWebpackPlugin.options.title %></title>
    title: 'xx信息化平台',
    // 在这个页面中包含的块，默认情况下会包含
    // 提取出来的通用 chunk 和 vendor chunk
    chunks: ['index', ...sameChunks],
  },