详解Webpack如何引入CDN链接来优化编译后的体积
背景
在 Vue 项目中,引入到工程中的所有 js 文件,编译时都会被打包进 vendor.js,也就导致了 vendor.js 文件体积变得相当臃肿,一定程度上影响着页面的渲染。为了减少编译后的体积,提高页面渲染速度,我们可以通过引入 CDN 链接把库分离,多线程异步 js 库,从而达到加速渲染的目的。那么我们如何做呢?
步骤
1.引入CDN链接
在项目的 index.html 中,常规方式引入 CDN 链接,此处以 vue 和 element-ui 为例:
<body> <div id="app"></div> <!-- CDN方式引入vue --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- CDN方式引入element-ui --> <script src="https://unpkg.com/element-ui@2.8.2/lib/index.js"></script> </body>
2.添加externals属性
Vue-cli 2
在项目的 build/webpack.base.conf.js 中,在下面合适位置添加 externals 相关语句,在 entry 后面加入即可:
module.exports = { context: path.resolve(__dirname, '../'), entry: { function: './src/main.js' }, externals:{ 'vue': 'Vue', 'element-ui': 'ElementUI' } ... }
Vue-cli 3
在项目根目录的 vue.config.js 中,将 configureWebpack 配置代码块添加进入即可:
module.exports = { configureWebpack:{ externals: { 'vue': 'Vue', 'element-ui': 'ElementUI' } } }
注意:在上述代码中,'vue': 'Vue' 对应形式为 key : value,其中 key 为项目中引用的名称,而 value 是资源本身定义的名称(不可改),正常情况下我们可以参照 src/main.js 进行查看:
import Vue from 'vue' import ElementUI from 'element-ui' //打开src/main.js查阅以上两行代码,其前面作为value,后面作为key。
3.注释import及Vue.use(xxx)
在项目的 src/main.js 中,注释掉以下语句:
// import Vue from 'vue' // import ElementUI from 'element-ui' // import 'element-ui/lib/theme-chalk/index.css' import App from './App' Vue.config.productionTip = false // Vue.use(ElementUI)
注:使用 eslint 规则的项目请不要注释 import 及 Vue.use,除非你不使用那烦人的 eslint。
完成以上步骤后就可以开始执行 npm run build,你会发现编译后的 vendor.js 从几百K降到几十K,也就意味着优化体积已经成效。 另外,有好多网友先前为了减少体积就已经配置了 按需引入,如果引入 CDN 之后,记得把按需引入的配置去掉哦,因为引入 CDN 之后就不存在按需引入这种说法啦!
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
- 详解webpack和webpack-simple中如何引入css文件
- Webpack如何打包才能尽可能的缩小体积(详解)
- 详解webpack + react + react-router 如何实现懒加载
- Webpack打包后体积过大的优化思路
- EasyDSS高性能流媒体服务器前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间
- 详解如何快速配置webpack多入口脚手架
- 浅谈如何使用 webpack 优化资源
- 详解webpack编译速度提升之DllPlugin
- 详解webpack引入第三方库的方式以及注意事项
- 浅谈 Webpack 如何处理图片(开发、打包、优化)
- 详解vue-cli与webpack结合如何处理静态资源
- 详解如何使用webpack打包JS
- webpack和webpack-simple区别(如何引入css文件)
- 详解如何使用webpack在vue项目中写jsx语法
- 详解vue-cli + webpack 多页面实例配置优化方法
- [转] Webpack 打包优化之体积篇
- 详解如何webpack使用DllPlugin
- Webpack 打包优化之体积篇
- webpack + react 优化:缩小js包体积
- 如何在 webpack 中引入未模块化的库,如 Zepto