内容简介：经过近几年的沉淀，前端届的变革在现阶段总算是进入了一个平稳期。回顾一下前人走过的路，主要是在解决以下问题：为了解决这些问题，出现了以下解决方案：这些解决方法成为了我们开发中不可或缺的功能，于是我们需要一个工具把这些联立起来，于是前后出现像grunt、gulp、fis、webpack等前端工程化构建工具。经过一段时间的更新迭代后，webpack以万物皆模块的思想以及功能强大，渐渐在众多工具中脱颖而出，成为前端项目中常用的构建工具。
经过近几年的沉淀，前端届的变革在现阶段总算是进入了一个平稳期。回顾一下前人走过的路，主要是在解决以下问题：
- 浏览器支持的语言特性不太友好，影响开发效率
- 项目缺乏依赖管理，复制粘贴太低效且不好控制
- 需要 工具 来压缩代码、压缩图片、生成文件hash用于控制浏览器缓存等功能
- 开发时保存代码能实时刷新浏览器提高开发体验
为了解决这些问题，出现了以下解决方案：
- babel，将ES6、typescript转成浏览器支持的ES5代码
- DSL(domain specific language)，例如：less、sass等对于css的扩展，jsx、vue template、angular template对于html的扩展
- npm 依赖管理工具
- 利用工具处理压缩代码、压缩图片、生成文件hash等功能
- 利用live reload、browsersync、hot reload工具实时刷新浏览器
这些解决方法成为了我们开发中不可或缺的功能，于是我们需要一个工具把这些联立起来，于是前后出现像grunt、gulp、fis、webpack等前端工程化构建工具。经过一段时间的更新迭代后，webpack以万物皆模块的思想以及功能强大，渐渐在众多工具中脱颖而出，成为前端项目中常用的构建工具。
现状
在现阶段，个人觉得前端项目构建越来越重、越来越繁琐了。对于一个新的项目，总是需要安装一堆的依赖(几百M的node_modules)，然后写一堆构建工具的配置项，最后才能进行业务开发。当项目越来越大的时候，每次启动时都需要花费不少时间。因为构建工具需要对项目进行依赖分析、编译，最后才能输出浏览器能执行的文件。这时构建工具配置的优化又提上大家的工作日程。
目前构建优化的方案，以webpack为例，主要有以下几个方向：
- 减轻依赖分析：webpack的resolve配置，loder的exclude配置
- 分包，动态加载：import()、require.ensure()
- 提取公用部分，减少需要编译的依赖项：DllPlugin、externals
- 利用多线程、多进程进行并行编译：thread-loader、happyPack
- 缓存：cache-loader、hard-source-webpack-plugin
但是业务代码到达一定程度(5W行以上)，做了上述的优化后，速度确实加快了不少，但是个人感觉对于dev(开发环境)仍然有些沉重。
想法
在某次看到@vue/dev-server这个工具后，突然间灵光一闪，想到了一个可行性的方案。这个工具只用一行命令就可以快速的启动一个 .vue 单文件的开发环境，我们先来看看它做了什么处理。
按照文档建立的的文件，没有webpack.config之类的配置，也没有预处理输出的文件。
index.html 文件，利用目前最新chrome浏览器支持的es module加载main.js。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue dev</title>
</head>
<body>
<div id="app"></div>
<script type="module">
import './main.js'
</script>
</body>
</html>
复制代码
main.js文件，引入test.vue文件，跟平常项目的入口文件一样。test.vue文件内代码就是平常vue单文件的格式，不展示了。
import Vue from 'vue'
import App from './test.vue'
new Vue({
render: h => h(App)
}).$mount('#app')
复制代码
接着来看看浏览器加载的资源，路径跟import保持一致，类型都是script(Content-Type: application/javascript)。
main.js中， import Vue from 'vue' 被处理成 import Vue from '/__modules/vue' 。因为浏览器的es module还未实现仍在提案的 import-maps 特性，所以不支持不带路径的依赖。vue就是浏览器能执行的vue.js。
test.vue就是源文件进行编译之后的代码，因为原本的 .vue 单文件浏览器是不支持的，需要进行预编译。
由此可见，该工具重点在于利用中间件，做了以下处理：
.vue
仔细思考一下，目前的构建工具都是对项目所依赖的资源文件进行全量的处理，但很多时候，我们只是对于某个页面中的某个模块进行开发。从理想的角度出发，其实我们只需要对该页面依赖的资源文件进行处理。每当加载浏览器不能执行的资源：vue、sass、less等，才进行转译/编译处理，最后输出资源文件到浏览器。
实际上社区也有人在做类似的尝试，比如： systemjs ，github描述是： Dynamic ES module loader 。当然这不只是为了在浏览器端兼容es module，重点在于其实现的 Transform loader 功能。该功能提供类似于webpack loader的功能，对于匹配的依赖进行相对应的loader处理。具体loader处理可以放到web worker或者通过node server进行处理，如果能兼容大部分webpack loader倒是一个不错的方案。
目前该想法还有待验证与实现，有兴趣的可去了解一下相关的内容，若有进一步的研究，也希望能一起交流讨论。
以上所述就是小编给大家介绍的《聊聊前端项目构建的现状与想法》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Charlotte's Web
E. B. White / Puffin Classics / 2010-6-3 / GBP 6.99
This is the story of a little girl named Fern who loved a little pig named Wilbur and of Wilbur's dear friend, Charlotte A. Cavatica, a beautiful large grey spider. With the unlikely help of Templeton......一起来看看 《Charlotte's Web》 这本书的介绍吧!
