vue编译打包速度优化
1、首先颂简在config文件夹下配置webpack.dll.config.js(内容如下),要打包的模块的数组可以将神轿一些较大的依赖放进vendor中
2、在package.json的scripts加上
3、运行npm run dll就可以游樱肆生成vendor-manifest.json和vendor.dll.js
4、然后在index.html中引入vendor.dll.js
然后就可以正常的进行编译打包,会发现将更多的依赖放到vendor,打包速度越快
优化前
优化后
大概平均可以节省三分之一的时间。参考 webpack中文网
VUE中如何动态编译js
需求:动态获取一段字符串类型的js脚本,动态编译它并且可以敏丛完美在vue中运行与之交互。
实现:动态编译js的方式有饥橘eval和new function
简单例子:
eval:
new function:
显然后者更利于扩展,详细了解区别可以参考链接内容:烂拿团
要注意使用new Function,在vue环境中直接赋值的方式函数作用域与赋值vue结构对象不同:
vue编译打包
首先找到我们的vue项目文件夹下打开终端
输入我们的第一个命令
npm run build
编译完成后全局全装server
npm install -g serve
安装完成后运行一下编译后的项目
serve dist
然后给拍渣了我们一个地址打开就是编译后的项目
然后我们的项目多了一个文件夹dist里面有一个闷盯index.html文件就是我们编译后的蚂贺和文件
一个.vue文件,是如何被编译在浏览器中运行的?
自我理解的作用:解析转换.vue文件。提取出script,css,template,再分别交给对应的loader去处理。核心就是提取。
官方定义:
1、允许为vue组件的每个部分使用他的webpack loader,例如在style中使用sass,在template中使用Pug
2、允许一个.vue文件中使用自定义块,并对其运用自定义的loader链
3、使用webpack loader将style,template中引用的资源当作模块依赖处理
4、为每个组件模拟出scoped css
5、在开发过程中使用热重载来保持状态