首页>>前端>>Vue->vue编译(vue编译打包)

vue编译(vue编译打包)

时间:2023-12-07 本站 点击:0

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、在开发过程中使用热重载来保持状态


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/Vue/17568.html