做电商网站需要注意哪些,微信app下载免费,常用十大浏览器,做外贸一般做什么前言上文说到我们利用webpack来打包一个可配置的bootstrap#xff0c;但文末留下一个问题#xff1a;由于bootstrap十分庞大#xff0c;因此每次编译都要耗费大部分的时间在打包bootstrap这一块#xff0c;而换来的仅仅是配置的便利#xff0c;十分不划算。我也并非是故意…前言上文说到我们利用webpack来打包一个可配置的bootstrap但文末留下一个问题由于bootstrap十分庞大因此每次编译都要耗费大部分的时间在打包bootstrap这一块而换来的仅仅是配置的便利十分不划算。我也并非是故意卖关子这的确是我自己开发中碰到的问题而在撰写完该文后我立即着手探索解决之道。终于发现了webpack这一大杀器DllPluginDllReferencePlugin打包时间过长的问题得到完美解决。解决方案的机制和原理DllPluginDllReferencePlugin这一方案实际上也是属于代码分割的范畴但与CommonsChunkPlugin不一样的是它不仅仅是把公用代码提取出来放到一个独立的文件供不同的页面来使用它更重要的一点是把公用代码和它的使用者(业务代码)从编译这一步就分离出来换句话说我们可以分别来编译公用代码和业务代码了。这有什么好处呢很简单业务代码常改而公用代码不常改那么我们在日常修改业务代码的过程中就可以省出编译公用代码那一部分所耗费的时间了(是不是马上就联想到坑爹的bootstrap了呢)。整个过程大概是这样的利用DllPlugin把公用代码打包成一个“Dll文件”(其实本质上还是js只是套用概念而已)除了Dll文件外DllPlugin还会生成一个manifest.json文件作为公用代码的索引供DllReferencePlugin使用。在业务代码的webpack配置文件中配置好DllReferencePlugin并进行编译达到利用DllReferencePlugin让业务代码和Dll文件实现关联的目的。在各个页面中先加载Dll文件再加载业务代码文件。适用范围Dll文件里只适合放置不常改动的代码比如说第三方库(谁也不会有事无事就升级一下第三方库吧)尤其是本身就庞大或者依赖众多的库。如果你自己整理了一套成熟的框架开发项目时只需要在上面添砖加瓦的那么也可以把这套框架也打包进Dll文件里甚至可以做到多个项目共用这一份Dll文件。如何配置哪些代码需要打包进Dll文件我们需要专门为Dll文件建一份webpack配置文件不能与业务代码共用同一份配置const webpack require(webpack);const ExtractTextPlugin require(extract-text-webpack-plugin);const dirVars require(./webpack-config/base/dir-vars.config.js); // 与业务代码共用同一份路径的配置表module.exports {output: {path: dirVars.dllDir,filename: [name].js,library: [name], // 当前Dll的所有内容都会存放在这个参数指定变量名的一个全局变量下注意与DllPlugin的name参数保持一致},entry: {/*指定需要打包的js模块或是css/less/图片/字体文件等资源但注意要在module参数配置好相应的loader*/dll: [jquery, !!bootstrap-webpack!bootstrapConfig,metisMenu/metisMenu.min, metisMenu/metisMenu.min.css,],},plugins: [new webpack.DllPlugin({path: manifest.json, // 本Dll文件中各模块的索引供DllReferencePlugin读取使用name: [name], // 当前Dll的所有内容都会存放在这个参数指定变量名的一个全局变量下注意与参数output.library保持一致context: dirVars.staticRootDir, // 指定一个路径作为上下文环境需要与DllReferencePlugin的context参数保持一致建议统一设置为项目根目录}),/* 跟业务代码一样该兼容的还是得兼容 */new webpack.ProvidePlugin({$: jquery,jQuery: jquery,window.jQuery: jquery,window.$: jquery,}),new ExtractTextPlugin([name].css), // 打包css/less的时候会用到ExtractTextPlugin],module: require(./webpack-config/module.config.js), // 沿用业务代码的module配置resolve: require(./webpack-config/resolve.config.js), // 沿用业务代码的resolve配置};如何编译Dll文件编译Dll文件的代码实际上跟编译业务代码是一样的记得利用--config指定上述专供Dll使用的webpack配置文件就好了$ webpack --progress --colors --config ./webpack-dll.config.js另外建议可以把该语句写到npm scripts里好记一点哈。如何让业务代码关联Dll文件我们需要在供编译业务代码的webpack配置文件里设好DllReferencePlugin的配置项new webpack.DllReferencePlugin({context: dirVars.staticRootDir, // 指定一个路径作为上下文环境需要与DllPlugin的context参数保持一致建议统一设置为项目根目录manifest: require(../../manifest.json), // 指定manifest.jsonname: dll, // 当前Dll的所有内容都会存放在这个参数指定变量名的一个全局变量下注意与DllPlugin的name参数保持一致});配置好DllReferencePlugin了以后正常编译业务代码即可。不过要注意必须要先编译Dll并生成manifest.json后再编译业务代码而以后每次修改Dll并重新编译后也要重新编译一下业务代码。如何在业务代码里使用Dll文件打包的module/资源不需要刻意做些什么该怎么require就怎么requirewebpack都会帮你处理好的了。如何整合Dll在每个页面里都要按这个顺序来加载js文件Dll文件 CommonsChunkPlugin生成的公用chunk文件(如果没用CommonsChunkPlugin那就忽略啦) 页面本身的入口文件。有两个注意事项如果你是像我一样利用HtmlWebpackPlugin来生成HTML并自动加载chunk的话请务必在里手写
