javascript在浏览器端步入模块化时代以后,产生了下列的问题:
- 性能和效率的问题。由于模块化的出现,致使需要功能模块被细分,从而导致js文件变多(依赖变多)。进而,当引入一个完整的功能模块的时候,浏览器会加载更多的js文件。浏览器加载js文件是通过网络请求的方式的获取的,如果一个模块的依赖很多的话,就会发生很多的网络请求去获取js文件,导致了多余的网络开销,间接的影响了性能。
- 兼容性问题。浏览器目前的模块化标准只支持ES6,AMD,CMD,并不支持commonJS的模块化标准,进而导致使用commonJS模块化标准的包,浏览器是不支持的。假如你希望通过npm去安装一个包给浏览器使用,很遗憾的是,浏览器很多时候用不了,因为你安装的那个包很可能就是通过commonJS的模块化标准导出的,浏览器不支持,这就让人很郁闷了。
前端构建工具就是为了解决以上问题而诞生,那么构建工具是如何解决这些问题的呢?
- 通过打包和压缩的方式,把多个文件,通过内部逻辑分析和算法,合并少量文件,减少了文件的数量,并且把文件内部不必要的空格和符合去掉,把变量的长度用更简短的字母替换,进而减少了文件的体积,还提高了一定的安全性。当浏览器加载的文件数量和体积都变小了,效率和性能自然就提高了。
- 有了webpack构建工具之后,可以随意使用ES6或者commonJS的方式导入模块,构建工具会自行分析你的导入方式,而给你返回对应的结果,以下是四种情况:
// 相同的标准 1.使用commonJS的标准导入导出 2.使用ES6的标准导入导出 // 不同的标准 1.ES6的标准导出,使用commonJS的方式导入: //a.js: module.exports = { a:1 } //b.js: import all from './a.js' import { a } from './a.js' console.log(all) // { a:1 } console.log(a) // 1 2.commonJS的方式导出,ES6的方式导入: //a.js export const a = 1 export default 2 //b.js const all = require('./a.js') console.log(all) // { a:1, default:2 }