vue打包之后的vendor文件会有两个版本的vue
vue打包之后的vendor文件会有两个版本的vue -
在config文件夹下可以看到一个index.js文件，打开其中可以看到有几个属性分别是：assetsRoot: path.resolve(__dirname, '../dist')//其实这个就是刚才打包后的根目录文件夹dist,所有的文件都会输出到这里assetsSubDirectory: 'static' //默认是把css,fonts,images,js输出到这个文件夹下，但是我的改等我继续说。
我的解决办法：1、把不常改变的库放到index.html中，通过cdn引入，比如下面这样：然后找到build/webpack.base.conf.js文件，在module.exports = { } 中添加以下代码externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'element-ui': 'ELEMENT', },这样webpack就不会把vue.js, vue-等我继续说。
在config文件夹下可以看到一个index.js文件，打开其中可以看到有几个属性分别是：assetsRoot: path.resolve(__dirname, '../dist')//其实这个就是刚才打包后的根目录文件夹dist,所有的文件都会输出到这里assetsSubDirectory: 'static' //默认是把css,fonts,images,js输出到这个文件夹下，但是我的改等我继续说。
我的解决办法：1、把不常改变的库放到index.html中，通过cdn引入，比如下面这样：然后找到build/webpack.base.conf.js文件，在module.exports = { } 中添加以下代码externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'element-ui': 'ELEMENT', },这样webpack就不会把vue.js, vue-等我继续说。
在Vue 项目中，引入到工程中的所有js、css 文件，编译时都会被打包进vendor.js,若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验，
app是入口js文件bundle: 'app'，// vendor就是我们要打包的第三方库最终生成的文件名，数组里是要打包哪些第三方库， 如果不是在node——modules里面，可以填写库的具体地址vendor: ['vue'] }, output: { path: __dirname + '/bulid/', // 文件名称filename: '[name].js' }, plugins等我继续说。
使用vue-cli生成的vendor.js文件太大,有办法减少体积吗 -
使用“js压缩”工具可缩小体积，可百度搜索“js压缩”查找工具把vendor.js代码ctrl + a全选，再ctrl + c复制，粘贴到js压缩工具里，点击“压缩”或“普通压缩”，然后再把压缩后的代码复制粘贴到vendor.js文件中。
resolve.alias文档地址创建import 或require 的别名，来确保模块引入变得更简单。例如，一些位于src/ 文件夹下的常用模块：不过经过自己的实践最后三点是对自己项目优化最大的。文章也主要对后面几点详细说明一下原来打包一个项目所等会说。
Webpack如何实现持久化缓存 -
vendor: [ 'vue', 'axio', 'vue-router', 'vuex', // more ], },} 第三个ExtractTextPlugin 插件用于将css 从打包好的js 文件中抽离，生成独立的css 文件，想象一下，当你只是修改了下样式，并没有修改页面的功能逻辑，你肯定不希望你的js 文件hash 值变化，你肯定是希望css 和js 能够相互分希望你能满意。
vendor: [ 'vue', 'axio', 'vue-router', 'vuex', // more ], },} 第三个ExtractTextPlugin 插件用于将css 从打包好的js 文件中抽离，生成独立的css 文件，想象一下，当你只是修改了下样式，并没有修改页面的功能逻辑，你肯定不希望你的js 文件hash 值变化，你肯定是希望css 和js 能够相互分说完了。