webpack dllPlugin踩坑

在chainWebpack中配置

chainWebpack:config => {
    const files = fs.readdirSync(path.resolve(__dirname, './dll'))
    for (let i = 0; i < files.length; i++) {
        if (/.*\.dll.js/.test(files[i])) {
            config.plugin('AddAssetHtmlWebpackPlugin' + i).use(require('add-asset-html-webpack-plugin'), [{
              filepath: path.resolve(__dirname, 'dll', files[i])
            }])
          }
         if (/.*\.manifest.json/.test(files[i])) {
            config.plugin('DllReferencePlugin' + i).use(require('webpack/lib/DllReferencePlugin'), [{
              context: __dirname,
              manifest: path.resolve(__dirname, 'dll', files[i])
            }])
          }
    }
}

注:本来for循环是用forEach来写的,但是报Cannot assign to read only property 'exports' of object '#',

百度的是import和module.exports不可以一起使用,也不知道和forEach有什么关系

chainWebpack:config => {
    const files = fs.readdirSync(path.resolve(__dirname, './dll'))
    files.forEach((file,index)=>{
        if (/.*\.dll.js/.test(file)) {
            config.plugin('AddAssetHtmlWebpackPlugin' + index).use(require('add-asset-html-webpack-plugin'), [{
              filepath: path.resolve(__dirname, 'dll', file)
            }])
          }
         if (/.*\.manifest.json/.test(file)) {
            config.plugin('DllReferencePlugin' + index).use(require('webpack/lib/DllReferencePlugin'), [{
              context: __dirname,
              manifest: path.resolve(__dirname, 'dll', file)
            }])
          }
    })
}

 

 

vue-cli3 默认会把所有通过import()按需加载的javascript文件加上 prefetch 。

所以看起来路由懒加载仿佛失效一样,但是prefetch的作用是在关键业务代码加载完成之后在带宽空闲的时候提前加载文件

你可能感兴趣的:(项目常用)