vue引入vendor.js，vue引入第三方js

webpack打包优化怎么做(提升webpack打包速度)

webpack 执行预处理文件时单线程的，我们可以使用 happypack 来多线程处理文件。

再优化下去的话，我们要知道webpack打包的过程中做了啥，首先是解析依赖啦，然后就是各种各样的loader。

减小文件搜索范围配置 resolve.modulesWebpack的resolve.modules配置模块库（即 node_modules）所在的位置，在 js 里出现 import vue 这样不是相对、也不是绝对路径的写法时，会去 node_modules 目录下找。

相关问答

Q1: vue打包优化——vendor体积过大

1、至此 vendor 的拆解工作完成， vendor 体积小于500K， 小程序开发者工具顺利完成打包工作。

2、在vue.config.js文件中的chainWebpack配置插件，默认会在8888端口打开 根据之前打包分析图来看，主要是locale下moment的其他语言包占用体积较大。

3、基于vue-cli0构建项目，npm引入多个第三方包。build之后，包体积太大导致首屏过长。

4、使用“js压缩”工具可缩小体积，可百度搜索“js压缩”查找工具 把vendor.js代码ctrl + a全选，再ctrl + c复制，粘贴到js压缩工具里，点击“压缩”或“普通压缩”，然后再把压缩后的代码复制粘贴到vendor.js文件中。

5、安装compression-webpack-plugin插件。前端将文件打包成.gz文件，然后通过nginx的配置，让浏览器直接解析.gz文件，可以大大提升文件加载的速度。

Q2: vue打包之后的vendor文件会有两个版本的vue

1、引入两个版本的Element可能会引起命名冲突和资源重复加载等问题，不推荐这么做。

2、报错原因：通常出现于一些依赖库的更新或者安装新的依赖库之后(可以认为npm update已经成为一种习惯)，导致了vue和vue-template-compiler的版本不一致。

3、引入路径出了问题。因为vue-cli会将按照顺序将所有文件打包到一个文件，引入的顺序会影响打包的顺序。

Q3: 详解Webpack如何引入CDN链接来优化编译后的体积

1、使用cdn其实也就是在webpack热启动和打包项目的时候动态插入script和style链接 ，为了方便维护，我们通过在 build/utils.js 文件上添加几个方法，将来在 webpack.dev.conf.js 和 webpack.prod.conf.js 上可以使用。

2、手动调用 webpack 的 API，获取打包后的文件名，通过 writeTemplate 更新 html 代码。完整代码猛戳 gitst。

3、这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载。

4、要是使用CDN写死在html中，不同环境需要手动的切换CDN，那么早晚有一天会搞乱，下面就说说怎么在vue-cli 0 中根据不同环境动态注入CDN。

5、下面，以引入vue、vuex、vue-router为例，说明处理流程。

6、Pick：将最近装入编辑窗口的8个文件列成一个表让用户选择， 选择后将该程序装入编辑区， 并将光标置在上次修改过的地方。其热健为Alt-F3。 New：新建文件， 缺省文件名为NONAME.C， 存盘时可改名。

vue引入vendor.js的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue引入第三方js、vue引入vendor.js的信息别忘了在本站进行查找喔。