vue 使用webpack打包，出现路径404 ，导致白屏webpack-bundle-analyzer使用

news2024/11/15 20:07:46

使用webpack打包时，遇到两个问题，导致页面出现白屏
一个是cdn对于静态文件限制大小，不能大于2MB，超过这个大小后，就不能上传cdn成功，导致页面加载时，长时间白屏，且找不到资源，因为这个大文件就没有上传成功，使用webpack的splitChunksPlugin就可以解决这个问题。

具体的参数，下面简单介绍下，也可根据自己情况，按官网配置：

chunks 选项，决定要提取哪些模块
默认是 async ：只提取异步加载的模块出来打包到一个文件中。
异步加载的模块：通过 import(‘xxx’) 或 require([‘xxx’],() =>{}) 加载的模块。
initial：提取同步加载和异步加载模块；
如果 xxx 在项目中异步加载了，也同步加载了，那么 xxx 这个模块会被提取两次，分别打包到不同的文件中。
同步加载的模块：通过 import xxx 或 require(‘xxx’) 加载的模块。
all：不管异步加载还是同步加载的模块都提取出来，打包到一个文件中；
minSize 选项：规定被提取的模块在压缩前的大小最小值，单位为字节；
默认为30000，只有超过了30000字节才会被提取。
maxSize 选项：把提取出来的模块打包生成的文件大小不能超过maxSize值；
如果超过了，要对其进行分割并打包生成新的文件。
单位为字节，默认为0，表示不限制大小。
minChunks 选项：表示要被提取的模块最小被引用次数，引用次数超过或等于minChunks值，才能被提取。
maxAsyncRequests 选项：最大的按需(异步)加载次数，默认为 6；
maxInitialRequests 选项：打包后的入口文件加载时，还能同时加载js文件的数量（包括入口文件），默认为4。

优先级：maxInitialRequests / maxAsyncRequests < maxSize < minSize；

automaticNameDelimiter 选项：打包生成的js文件名的分割符，默认为：~
name选项：打包生成 js 文件的名称；
cacheGroups 选项，核心重点，配置提取模块的方案，里面每一项代表一个提取模块的方案。

下面是 cacheGroups 每项中特有的选项，其余选项和外面一致，若 cacheGroups 每项中有，就按配置的，没有就使用外面配置的；

test 选项：
用来匹配要提取的模块的资源路径或名称，值是正则或函数；
priority 选项：
方案的优先级，值越大表示提取模块时优先采用此方案，默认值为0；
reuseExistingChunk 选项：true / false。
为true时，如果当前要提取的模块，在已经在打包生成的js文件中存在，则将重用该模块，而不是把当前要提取的模块打包生成新的 js 文件。
enforce选项：true / false。
为true时，忽略minSize，minChunks，maxAsyncRequests和maxInitialRequests外面选项

后来根据webpack官网的文档，对包进行了分包处理，但是打包后，在页面中仍然出现了白屏，这个时候，一定要记得看下浏览器，打开调试器，看下是否是资源问题，这也就是我遇到的另一个问题，打包后，路径中有个波浪线，类似于http:///app~2b8575a2.a99ad819.js ，所以导致拉不到数据源，修改下即可。

splitChunks.automaticNameDelimiter string = ‘~’

By default webpack will generate names using origin and name of the chunk (e.g. vendors~main.js). This option lets you specify the delimiter to use for the generated names. 翻译过来：默认情况下，webpack将使用块的来源和名称生成名称（例如vendors~main.js）。此选项允许您指定用于生成的名称的分隔符，这个分隔符是默认的~ ，我替换了下，用‘-’就好啦。

官网地址：https://webpack.docschina.org/plugins/split-chunks-plugin/点击查看官网文档

直接上代码 vue.config.js：

const publicPath = process.env.VUE_APP_PUBLIC_PATH

module.exports = {
  publicPath,
  devServer: {
    disableHostCheck: true,
    port: 80
  },
  configureWebpack: (config) => {
    config.devtool = isSoureMap ? 'hidden-source-map' : 'eval-cheap-module-source-map'
    config.entry = { app: './src/main.js' }
    if (process.env.NODE_ENV === 'production') {
      // 分割文件
      config.optimization.splitChunks = {
        maxSize: 200000, //提取出来的模块打包生成的文件大小不能超过maxSize值
        automaticNameDelimiter: '-', // 打包生成的js文件名的分割符
        cacheGroups: { // 配置提取模块的方案，里面每一项代表一个提取模块的方案
          vendor: {
            test: /[\\/]node_modules[\\/]/,  // 用来匹配要提取的模块的资源路径或名称，值是正则或函数；
            name(module) {
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
              return `chunk.${packageName.replace('@', '')}`
            },
            priority: 10 // 方案的优先级，值越大表示提取模块时优先采用此方案，默认值为0
          }
        }
      }
    }
  },
  // 查看打包文件体积大小
  chainWebpack(config) {
    config
      .plugin('webpack-bundle-analyzer')
      .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  },
  lintOnSave: true
}

上面提及的webpack-bundle-analyzer 插件，可以在页面上看到引入的js文件大小，如需要，可进行如下操作：

安装下webpack-bundle-analyzer包

 npm install webpack-bundle-analyzer --save

package.json 修改 scripts

"scripts": {
    "dev": "vue-cli-service serve --mode staging",
    "build:report": "vue-cli-service build --report"  
  }

vue.config.js中添加

// 查看打包文件体积大小
  chainWebpack(config) {
    config
      .plugin('webpack-bundle-analyzer')
      .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  },