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

vue项目打包优化策略

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h1 id="articleHeader0">vue项目打包优化策略</h1> <p>使用vue-cli部署生产包时,发现资源包很大,打包后的<code>vendor.js</code>达到了1.4M,这已经很大了,而且会影响到首屏加载。那么,怎么优化呢?</p> <h3 id="articleHeader1">1.组件按需加载</h3> <p>这是首先可以优化的点。如果频繁使用了第三方组件/UI库,如我的项目中经常同时使用了 element-ui, mint-ui,echarts等组件库,如果全部引入,项目体积非常大,这时可以按需引入组件。</p> <p>示例如下:</p> <h4>1.1 element-ui</h4> <p>首先,安装 <a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>-plugin-component:</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install babel-plugin-component -D " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>npm <span class="hljs-keyword">install</span> <a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>-<span class="hljs-keyword">plugin</span>-component -D </code></pre> <p>然后,将.<a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>rc 修改为:</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="{ &quot;presets&quot;: [[&quot;es2015&quot;, { &quot;modules&quot;: false }]], &quot;plugins&quot;: [ [ &quot;component&quot;, { &quot;libraryName&quot;: &quot;element-ui&quot;, &quot;styleLibraryName&quot;: &quot;theme-chalk&quot; } ] ] } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs json"><code>{ <span class="hljs-attr">"presets"</span>: [[<span class="hljs-string">"es2015"</span>, { <span class="hljs-attr">"modules"</span>: <span class="hljs-literal">false</span> }]], <span class="hljs-attr">"plugins"</span>: [ [ <span class="hljs-string">"component"</span>, { <span class="hljs-attr">"libraryName"</span>: <span class="hljs-string">"element-ui"</span>, <span class="hljs-attr">"styleLibraryName"</span>: <span class="hljs-string">"theme-chalk"</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// main.js import Vue from 'vue' import { Dialog, Loading } from 'element-ui' Vue.use(Dialog) Vue.use(Loading.directive) Vue.prototype.$loading = Loading.service // 然后正常使用组件 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-comment">// main.js</span> <span class="hljs-keyword">import</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> { Dialog, Loading } <span class="hljs-keyword">from</span> <span class="hljs-string">'element-ui'</span> Vue.use(Dialog) Vue.use(Loading.directive) Vue.prototype.$loading = Loading.service <span class="hljs-comment">// 然后正常使用组件</span> </code></pre> <h4>1.2 mint-ui</h4> <p>由于mint-ui是element-ui的移动端组件,所以它的使用和引入几乎和element-ui一样。</p> <p>首先,安装 babel-plugin-component:</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install babel-plugin-component -D " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>npm <span class="hljs-keyword">install</span> babel-<span class="hljs-keyword">plugin</span>-component -D </code></pre> <p>然后,将.babelrc 修改为:</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="{ &quot;presets&quot;: [ [&quot;es2015&quot;, { &quot;modules&quot;: false }] ], &quot;plugins&quot;: [[&quot;component&quot;, [ { &quot;libraryName&quot;: &quot;mint-ui&quot;, &quot;style&quot;: true } ]]] } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs json"><code>{ <span class="hljs-attr">"presets"</span>: [ [<span class="hljs-string">"es2015"</span>, { <span class="hljs-attr">"modules"</span>: <span class="hljs-literal">false</span> }] ], <span class="hljs-attr">"plugins"</span>: [[<span class="hljs-string">"component"</span>, [ { <span class="hljs-attr">"libraryName"</span>: <span class="hljs-string">"mint-ui"</span>, <span class="hljs-attr">"style"</span>: <span class="hljs-literal">true</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// main.js import Vue from 'vue' import { Toast, MessageBox } from 'element-ui' Vue.use(Dialog) Vue.use(Loading.directive) Vue.prototype.$loading = Loading.service // 然后正常使用组件 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-comment">// main.js</span> <span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> { Toast, MessageBox } <span class="hljs-keyword">from</span> <span class="hljs-string">'element-ui'</span> Vue.use(Dialog) Vue.use(Loading.directive) Vue.prototype.$loading = Loading.service <span class="hljs-comment">// 然后正常使用组件</span> </code></pre> <p>注意,element-ui和mint-ui不能同时在.babelrc中进行插件设置,这种情况下,依然可以按需引入,但是不要在<code>.babelrc</code>中配置,在引入的地方同时引入css即可。</p> <h4>1.3 echarts</h4> <p>首先安装babel-plugin-equire</p> <p>npm i babel-plugin-equire -D</p> <p>然后,在<code>.babelrc</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="{ &quot;plugins&quot;: [ // other plugins ... &quot;equire&quot; ] } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs json"><code>{ <span class="hljs-attr">"plugins"</span>: [ // other plugins ... <span class="hljs-string">"equire"</span> ] } </code></pre> <p>创建一个js文件</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// echarts.js // eslint-disable-next-line const echarts = equire([ 'tooltip', 'candlestick', 'bar', 'line', 'axisPointer', 'legend', 'grid' ]) export default echarts // 业务组件,引入echarts import echarts from '@/assets/lib/echarts' // 使用与以前一样 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-comment">// echarts.js</span> <span class="hljs-comment">// eslint-disable-next-line</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> echarts = equire([ <span class="hljs-string">'tooltip'</span>, <span class="hljs-string">'candlestick'</span>, <span class="hljs-string">'bar'</span>, <span class="hljs-string">'line'</span>, <span class="hljs-string">'axisPointer'</span>, <span class="hljs-string">'legend'</span>, <span class="hljs-string">'grid'</span> ]) <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> echarts <span class="hljs-comment">// 业务组件,引入echarts</span> <span class="hljs-keyword">import</span> echarts <span class="hljs-keyword">from</span> <span class="hljs-string">'@/assets/lib/echarts'</span> <span class="hljs-comment">// 使用与以前一样</span> </code></pre> <p>按需加载echarts</p> <p>解决vue-cli首屏加载慢的问题</p> <h3 id="articleHeader2">2.路由懒加载</h3> <p>这里需要一个插件</p> <p>vue-router官方推荐syntax-dynamic-import插件,不过它要求同时安装@bable/core^7.0.0,如果你安装了babel-core6,是会有版本冲突的。我的做法如下</p> <p>npm install babel-plugin-syntax-dynamic-import --save-dev(^6.18.0)</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// router.js const login = () => import('@/components/login')<br /> const router = new VueRouter({<br /> routes: [<br /> { path: '/login', component: login }<br /> ]<br /> })<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-comment">// router.js</span> <span class="hljs-keyword">const</span> login = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-keyword">import</span>(<span class="hljs-string">'@/components/login'</span>) <span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter({ routes: [ { path: <span class="hljs-string">'/login'</span>, component: login } ] }) </code></pre> <p>还有一种魔法注释用法</p> <p>有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk,一个特殊的注释语法来提供 chunk name (需要 Webpack &gt; 2.4)。</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const Foo = () => import(/* webpackChunkName: &quot;group-foo&quot; */ './Foo.vue')<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">const</span> Foo = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-keyword">import</span>(<span class="hljs-comment">/* webpackChunkName: "group-foo" */</span> <span class="hljs-string">'./Foo.vue'</span>) </code></pre> <h3 id="articleHeader3">3.异步组件</h3> <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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// template <test v-if=&quot;showTest&quot;></test></p> <p>// script<br /> components: {<br /> test: () => import('./test') // 将组件异步引入,告诉webpack,将该部分代码分割打包<br /> },<br /> methods:{<br /> clickTest () {<br /> this.showTest = !this.showTest<br /> }<br /> }<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-comment">// template</span> &lt;test v-<span class="hljs-keyword">if</span>=<span class="hljs-string">"showTest"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">test</span>&gt;</span></span> <span class="hljs-comment">// script</span> components: { <span class="hljs-attr">test</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-keyword">import</span>(<span class="hljs-string">'./test'</span>) <span class="hljs-comment">// 将组件异步引入,告诉webpack,将该部分代码分割打包</span> }, <span class="hljs-attr">methods</span>:{ clickTest () { <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.showTest = !<span class="hljs-keyword">this</span>.showTest } } </code></pre> <h3 id="articleHeader4">4.图片的压缩合并</h3> <p>无损压缩图片:<a href="https://tinypng.com/" rel="nofollow noreferrer" target="_blank">https://tinypng.com/</a></p> <p>如有可能,将图片制作成精灵图</p> <h3 id="articleHeader5">5.CDN加速</h3> <ul> <li> <p>在index.html中引入cdn资源</p> <p>...<br /> &lt;body&gt;</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div id=&quot;app&quot;> </div> <p><!-- built files will be auto injected --><br /> <script src=&quot;https://cdn.bootcss.com/vue/2.5.2/vue.min.js&quot;></script><br /> <script src=&quot;https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js&quot;></script><br /> <script src=&quot;https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js&quot;></script><br /> <script src=&quot;https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js&quot;></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-comment">&lt;!-- built files will be auto injected --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.bootcss.com/vue/2.5.2/vue.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>&lt;/body&gt;<br /> ...</p> </li> <li> <p>修改 build/webpack.base.conf.js</p> <p>module.<a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a>s = {<br /> context: path.resolve(__dirname, '../'),<br /> entry: {</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="app: './src/main.js'" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code style="word-break: break-word; white-space: initial;"><span class="hljs-string">app:</span> <span class="hljs-string">'./src/main.js'</span></code></pre> <p>},<br /> externals:{</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex':'Vuex', 'vue-resource': 'VueResource'" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code><span class="hljs-symbol">'vu</span>e': <span class="hljs-symbol">'Vu</span>e', <span class="hljs-symbol">'vue</span>-router': <span class="hljs-symbol">'VueRoute</span>r', <span class="hljs-symbol">'vue</span>x':<span class="hljs-symbol">'Vue</span>x', <span class="hljs-symbol">'vue</span>-resource': <span class="hljs-symbol">'VueResourc</span>e'</code></pre> <p>},<br /> ...<br />}</p> </li> <li>修改src/main.js src/router/index.js 注释掉import引入的vue,vue-resource <p>// import <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> from 'vue'<br />// import <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>Resource from 'vue-resource'<br />// Vue.use(VueResource)</p> </li> </ul> <h3 id="articleHeader6">6.压缩代码</h3> <p>vue-cli已经使用UglifyJsPlugin 插件来压缩代码,可以设置成如下配置:</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><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, drop_console: true, pure_funcs: ['console.log'] }, sourceMap: false }) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code><span class="hljs-selector-tag">new</span> <span class="hljs-selector-tag">webpack</span><span class="hljs-selector-class">.optimize</span><span class="hljs-selector-class">.UglifyJsPlugin</span>({ <span class="hljs-attribute">compress</span>: { warnings: false, drop_console: true, pure_funcs: [<span class="hljs-string">'console.log'</span>] }, <span class="hljs-selector-tag">source<a href="http://www.js-code.com/tag/map" title="浏览关于“Map”的文章" target="_blank" class="tag_link">Map</a></span>: <span class="hljs-selector-tag">false</span> }) </code></pre> <p>其中source<a href="http://www.js-code.com/tag/map" title="Map" target="_blank">Map</a>: false是禁用除错功能。</p> <p>如果设为true,在部署包中会生成.map结尾的js文件。它用于在代码混淆压缩的情况下仍可进行调试。这个功能虽好,但会大大增加整体资源包的体积,所以将其禁用。</p> <p></code></p>

总结

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

vue项目打包优化策略

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

vue项目打包优化策略

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

80%的人都看过