脚本宝典收集整理的这篇文章主要介绍了

Webpack打包优化

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h1 id="articleHeader0">简单粗暴的Webpack打包优化</h1> <blockquote><p>使用webpack+vue+......,在打包代码的时候经常由于引入的模块太多,导致打包速度很慢,并且打包后的js文件很大。</p></blockquote> <h2 id="articleHeader1">方案一:externals选项</h2> <p><strong>配置externals选项:</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="<a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a>" class="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>="// webpack.prod.config.js // 多余代码省略 module.<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s = { externals: { 'vue': '<a href="http://www.js-code.com/tag/window" title="浏览关于“window”的文章" target="_blank" class="tag_link">window</a>.<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>', 'vuex': 'w<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a><a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>w.Vuex', 'vue-router': 'window.VueRouter' ... } } // 配置externals之后,webpack不会把配置项中的代码打包进去,别忘了需要在外部引入cdn上的js文件 // html <body> <script src=&quot;XXX/cdn/vue.min.js&quot;></script> ...... </body>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-comment">// webpack.prod.config.js</span> <span class="hljs-comment">// 多余代码省略</span> <span class="hljs-built_in">module</span>.exports = { <span class="hljs-attr">externals</span>: { <span class="hljs-string">'vue'</span>: <span class="hljs-string">'window.Vue'</span>, <span class="hljs-string">'vuex'</span>: <span class="hljs-string">'window.Vuex'</span>, <span class="hljs-string">'vue-router'</span>: <span class="hljs-string">'window.VueRouter'</span> ... } } <span class="hljs-comment">// 配置externals之后,webpack不会把配置项中的代码打包进去,别忘了需要在外部引入cdn上的js文件</span> <span class="hljs-comment">// html</span> &lt;body&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"XXX/cdn/vue.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span> ...... &lt;<span class="hljs-regexp">/body&gt;</span></code></pre> <h2 id="articleHeader2">方案二:webpack.DLL<a href="http://www.js-code.com/tag/plugin" title="浏览关于“plugin”的文章" target="_blank" class="tag_link">plugin</a></h2> <p><strong>使用webpack.DLLplugin:</strong></p> <p><code>webpack.dll.config.js</code>:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// webpack.dll.config.js // 需要打包到一起的js文件 const vendors = [ 'vue', 'vuex', 'vue-router', 'axios', 'moment', 'vue-echarts' ]; module.exports = { // 也可以设置多个入口,多个vendor,就可以生成多个bundle entry: { vendor: vendors }, // 输出文件的名称和路径 output: { filename: '[name].bundle.js', path: path.join(__dirname, '..', 'static'), library: '[name]_[chunkhash]', }, plugins: [ // 这时候打包需要设置环境为production,因为像vue之类在 // dev环境下会比prod环境多一些信息,在生产环境如果打包的是dev代码, // vue也会给出警告 new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '&quot;production&quot;' } }), new webpack.DllPlugin({ path: path.join(__dirname, '..', 'static', '[name]-manifest.json'), name: '[name]_[chunkhash]', context: __dirname }), // 压缩 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }, sourceMap: true }), new webpack.LoaderOptionsPlugin({ minimize: true }), new webpack.optimize.OccurrenceOrderPlugin() ] } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-comment">// webpack.dll.config.js</span> <span class="hljs-comment">// 需要打包到一起的js文件</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> vendors = [ <span class="hljs-string">'vue'</span>, <span class="hljs-string">'vuex'</span>, <span class="hljs-string">'vue-router'</span>, <span class="hljs-string">'ax<a href="http://www.js-code.com/tag/ios" title="浏览关于“ios”的文章" target="_blank" class="tag_link">ios</a>'</span>, <span class="hljs-string">'moment'</span>, <span class="hljs-string">'vue-e<a href="http://www.js-code.com/tag/char" title="浏览关于“char”的文章" target="_blank" class="tag_link">char</a>ts'</span> ]; <span class="hljs-built_in">module</span>.exports = { <span class="hljs-comment">// 也可以设置多个入口,多个vendor,就可以生成多个bundle</span> en<a href="http://www.js-code.com/tag/try" title="浏览关于“try”的文章" target="_blank" class="tag_link">try</a>: { <span class="hljs-attr">vendor</span>: vendors }, <span class="hljs-comment">// 输出文件的名称和路径</span> output: { <span class="hljs-attr">file<a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a></span>: <span class="hljs-string">'[name].bundle.js'</span>, <span class="hljs-attr">path</span>: path.join(__dirname, <span class="hljs-string">'..'</span>, <span class="hljs-string">'<a href="http://www.js-code.com/tag/static" title="浏览关于“static”的文章" target="_blank" class="tag_link">static</a>'</span>), <span class="hljs-attr">library</span>: <span class="hljs-string">'[name]_[chunkhash]'</span>, }, <span class="hljs-attr">plugins</span>: [ <span class="hljs-comment">// 这时候打包需要设置环境为production,因为像vue之类在</span> <span class="hljs-comment">// dev环境下会比prod环境多一些信息,在生产环境如果打包的是dev代码,</span> <span class="hljs-comment">// vue也会给出警告</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> webpack.DefinePlugin({ <span class="hljs-string">'process.env'</span>: { <span class="hljs-attr">NODE_ENV</span>: <span class="hljs-string">'"production"'</span> } }), <span class="hljs-keyword">new</span> webpack.DllPlugin({ <span class="hljs-attr">path</span>: path.join(__dirname, <span class="hljs-string">'..'</span>, <span class="hljs-string">'static'</span>, <span class="hljs-string">'[name]-man<a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a>est.json'</span>), <span class="hljs-attr">name</span>: <span class="hljs-string">'[name]_[chunkhash]'</span>, <span class="hljs-attr">context</span>: __dirname }), <span class="hljs-comment">// 压缩</span> <span class="hljs-keyword">new</span> webpack.optimize.UglifyJsPlugin({ <span class="hljs-attr">compress</span>: { <span class="hljs-attr">warnings</span>: <span class="hljs-literal"><a href="http://www.js-code.com/tag/false" title="浏览关于“false”的文章" target="_blank" class="tag_link">false</a></span> }, <span class="hljs-attr">source<a href="http://www.js-code.com/tag/map" title="浏览关于“Map”的文章" target="_blank" class="tag_link">Map</a></span>: <span class="hljs-literal"><a href="http://www.js-code.com/tag/true" title="浏览关于“true”的文章" target="_blank" class="tag_link">true</a></span> }), <span class="hljs-keyword">new</span> webpack.LoaderOptionsPlugin({ <span class="hljs-attr">minimize</span>: <span class="hljs-literal">true</span> }), <span class="hljs-keyword">new</span> webpack.optimize.OccurrenceOrderPlugin() ] } </code></pre> <p>写好配置文件之后,执行命令:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="webpack --config webpack.dll.config.js" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code style="word-break: break-word; white-space: initial;"><span class="hljs-selector-tag">webpack</span> <span class="hljs-selector-tag">--config</span> <span class="hljs-selector-tag">webpack</span><span class="hljs-selector-class">.dll</span><span class="hljs-selector-class">.config</span><span class="hljs-selector-class">.js</span></code></pre> <p>之后就会在输出目录下看到两个文件:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// 打包后的js文件需要在页面中引入 vendor.bundle.js // 这个依赖关系文件用于app打包 vendor-manifest.json" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code><span class="hljs-comment">// 打包后的js文件需要在页面中引入</span> vendor.bundle.js <span class="hljs-comment">// 这个依赖关系文件用于app打包</span> vendor-manifest.json</code></pre> <p><code>webpack.prod.config.js</code>:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// webpack.prod.config.js // 省略不必要的代码 module.exports = { plugins: [ new webpack.DllReferencePlugin({ context: __dirname, manifest: require(path.join(__dirname, '..', 'static/vendor-manifest.json')) }) ] }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-comment">// webpack.prod.config.js</span> <span class="hljs-comment">// 省略不必要的代码</span> <span class="hljs-built_in">module</span>.exports = { <span class="hljs-attr">plugins</span>: [ <span class="hljs-keyword">new</span> webpack.DllReferencePlugin({ <span class="hljs-attr">context</span>: __dirname, <span class="hljs-attr">manifest</span>: <span class="hljs-built_in">require</span>(path.join(__dirname, <span class="hljs-string">'..'</span>, <span class="hljs-string">'static/vendor-manifest.json'</span>)) }) ] }</code></pre> <p>之后再执行命令去打包app中的静态资源文件的时候,就不会把<code>vendor.bundle.js</code>中已有的文件与自己的逻辑文件打包到一起,能够有效减小体积,同时<code>manifest.json</code>提供的依赖关系和模块id号也可以大大提高打包效率。</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

Webpack打包优化

全部内容,希望文章能够帮你解决

Webpack打包优化

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过