经常看到如jquery-3.0.0.js和jquery-3.0.0-min.js等两相似的文件名。
其实以上两个文件名的内容是一样的,不过带min代表的是占用最小的空间,为项目提高性能。压缩的部分如换行,空格等。
可以看出两文件的体积相差很大。
所以我们一般的话项目上线会用到带min的文件,而不带的一般用在开发中,方便学习查看。
同理,自己写的css ,js也是可以打包t提高性能的(html是不能打包的)。
实现打包功能的就是构建化工具:Grunt、Gulp、Webpack
一些说明:
1.构建化工具,需要NodeJs 环境支持(安装nodejs)
2. nodejs 的安装自带npm(node包管理工具)安装(npm:node package manager)
3.使用npm 的命令可以创建工程项目,可以打包项目
Webpack:是一个模块打包器(bundler)。
1.在Webpack看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理
2.它将根据模块的依赖关系进行静态分析,生成对应的静态资源
3.Webpack 本身只能加载JS/JSON模块,如果要加载其他类型的文件(模块),就需要使用对应的Loader 进行转换/加载,比如 css-loader
4.Loader 本身也是JavaScript 模块,运行在 node.js 环境中,即可以使用npm install 模块名来安装
5.配置文件webpack.config.js : 是一个node模块,返回一个 json 格式的配置信息对象
6.插件件可以完成一些Loader不能完成的功能。一般是在 webpack 的配置信息 plugins 选项中指定.
CleanWebpackPlugin: 自动清除指定文件夹资源 HtmlWebpackPlugin: 自动生成HTML文件并 UglifyJSPlugin: 压缩js文件
安装webpack
npm install webpack -g //全局安装
npm install webpack --save-dev //局部安装
参考资料遇到问题,待续。。。。。
https://my.oschina.net/mdxlcj/blog/1626534
https://my.oschina.net/mdxlcj/blog/1802438