玖叶教程网

今天来谈一谈基于javascript性能优化问题

为提升文件加载速度，项目需要合并JavaScript代码并且尽量少用<script></script>标签

通过给<script>标签增加defer属性或async属性来实现无阻塞加载JavaScript

页面中频繁的访问<script>标签会导致网站加载时间过长，影响系统交互体验

所以需要一种工具来把系统需要引入的资源文件进行统一打包

打包工具有很多，例如

webpack,gulp,bowserify,npm scripts,grunt等

这里推荐使用webpack打包

项目打包的好处在于减少了静态资源的加载次数、将更多资源进行压缩等

webpack支持require()和import，可以很好的结合前端主流框架vue.js或react应用

缺点是版本更新太快而且不同版本使用方法都存在差异

cd到工作盘全局安装webpack，例如D：

//安装全局webpack
npm install webpack -g

//安装全局webpack-cli
npm install webpack-cli -g

// 查看webpack版本
webpack -v

显示出版本号，证明webpack安装成功，之后可以全局使用webpack打包

打包之后的应用程序都会在项目中创建dist目录为网站运行目录

目录下包含index.html文件和static静态资源文件

webpack打包配置如下（以vue.js）为例

在vue.js或react中已经包含了webpack，所以很方便，直接使用就好

如果想更深的研究webpack技术

请跳转官方文档学习：https://www.webpackjs.com/