标签:提高 结合 过多 load comm 环境 rar reference 默认
resolve:{ extensions:[‘.js‘,‘.vue‘] // 不要过多配置,会降低打包速度 }
resolve:{ extensions:[‘.js‘,‘.vue‘], mainFiles:[‘index‘,‘child‘] // 不要过多配置,会降低打包速度 }
以上配置会先去找index,如果不存在,再去找child ---- 一般不会配这玩意儿
别名:
resolve:{ @:path.resolve(__dirname,‘../src‘) } import header from ‘@/header‘;
它指向src目录
5.使用DllPlugin提高打包速度
当我们在打包的时候有些公共库的代码,如lodash.js是不会改变的,那么我们只需要在第一次打包的时候分析,后面就不要再分析了。我们可以新增一个文件(webpack.dll.js):
const path=require(‘path‘); module.exports={ entry:{ vendors:[‘react‘,‘react-dom‘,‘lodash‘] }, output:{ filename:‘[name].dll.js‘, path:path.resolve(__dirname,‘../dll‘), library:‘[name]‘ } }
package.json中新增命令:
"build:dll":"webpack --config ./build/webpack.dll.js"
这个时候进行打包会生成一个vendors.dll.js,要使用它还需要在webpack.common.js中使用一个插件:
npm install add-asset-webpack-plugin --save
const AddAssetWebpackPlugin=require(‘add-asset-webpack-plugin‘); plugins:[ ... new AddAssetWebpackPlugin({ filepath:path.resolve(__dirname,‘../dll/vendors.dll.js‘) }) ]
这个时候所有的第三方模块实现了一次打包,但是业务中还是使用了node_modules中的模块,而没有使用vendors.dll.js中的模块,下一步需要实现的就是使用dll文件中的第三方模块。
我们需要在webpack.dll.js中使用一个插件:
const webpack=require(‘webpack‘); plugins:[ new webpack.DllPlugin({ name:‘[name]‘, path:path.resolve(__dirname,‘../dll/[name].manifest.json‘) // 会生成一个映射文件 }) ] 还要在webpack.common.js中使用一个插件: plugins:[ ... new DllReferencePlugin({ manifest:path.resolve(__dirname,‘../dll.vendors.manifest.json‘) }) ]
我们不止可以增加vendors,还可以增加多个,也可以动态添加,自行百度
6.控制包文件大小
7.thread-loader、parallel-webpack、happypack多进程打包
标签:提高 结合 过多 load comm 环境 rar reference 默认
原文地址:https://www.cnblogs.com/jingouli/p/12336173.html