本文目录一览:
- 1、webpack和gulp的区别
- 2、vue.config.js中的webpack配置,优化及多页面应用开发
- 3、Vue项目打包后js文件压缩
- 4、webpack 如何配置 CSS抽取 和 打包压缩
webpack和gulp的区别
gulp是工具链、构建工具,可以配合各种插件做js压缩,css压缩,less编译 替代手工实现自动化工作
1.构建工具
2.自动化
3.提高效率用
webpack是文件打包工具,可以把项目的各种js文、css文件等打包合并成一个或多个文件,主要用于模块化方案,预编译模块的方案
1.打包工具
2.模块化识别
3.编译模块代码方案用
所以定义和用法上来说 都不是一种东西,无可比性 ,更不冲突!【当然,也有相似的功能,比如合并,区分,但各有各的优势】
vue.config.js中的webpack配置,优化及多页面应用开发
目录
官方文档
vue-cli3以下版本中,关于webpack的一些配置都在config目录文件中,可是vue-cli3以上版本中,没有了config目录,那该怎么配置webpack呢?
3.x初始化项目后没有了build和config文件,如果你想对webpack相关内容进行配置,需要自己在根目录下(与package.json同级)创建一个vue.config.js文件,这个文件一旦存在,那么它会被 @vue/cli-service 自动加载。(但需要我们自己手动创建哦vue.config.js,跟package.json同级)
在配置中绝大多数都是(可选项)
常规操作还是用到了commjs语法
部署应用包的基本Url,默认/, 可以设置为相对路径./,这样打出来的包,可以部署到任意路径上
输出文件目录(打包后生成的目录,默认dist)
打包后生成的静态资源目录,默认“ ” ,也就是我们打包后的css,js等存放的位置
是否在保存的时候检查
生产环境的 source map,可以将其设置为 false 以加速生产环境构建,默认值是true
可通过 devServer.proxy解决前后端跨域问题(反向代理)
扩展: hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下,前者会自动刷新页面,后者不会刷新页面,而是在控制台输出热更新失败
扩展:
Preload: 用于标记页面加载后即将用到的资源,浏览器将在主体渲染前加载preload标记文件。Vue CLI 应用会为所有初始化渲染需要的文件自动生成 preload 提示;
Prefetch: 用于标记浏览器在页面加载完成后,利用空闲时间预加载的内容。Vue CLI 应用默认为所有作为 async chunk 生成的 JavaScript 文件 (通过动态 import() 按需 code splitting 的产物) 自动生成prefetch提示。
webpack配置
扩展:
在这里configureWebpack和chainWebpack的作用相同,唯一的区别就是他们修改webpack配置的方式不同:
这里配置了全局sass 需要安装的依赖 sass-loader less-loader
由于 sass-loader 版本不同,loaderOptions 中的 additionalData 的键名也不同
vue-cli3中的webpack与vue多页面应用开发
相关参数:
封装
很好的pwa插件相关配置
pwa介绍及使用
当运行项目并且打包的时候,会发现chunk-vendors.js这个文件非常大,那是因为webpack将所有的依赖全都压缩到了这个文件里面,这时我们可以将其拆分,将所有的依赖都打包成单独的js;
上面已经提到过去掉打印的操作(console、debug)这里详细讲解一下
新版uglifyjs-webpack-plugin需写成以下方式
gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩,可以减小60%以上的体积。webpack在打包时可以借助 compression webpack plugin 实现gzip压缩。
和我们正常创建项目相同,这里通过vue-cli3脚手架进行创建
Vue项目打包后js文件压缩
这段时间因为免费试用了 一台阿里云的服务器,配置是 2核4G 2M,
因为带宽太低了,每次在第一次加载的时候太慢了,通过F12调试,发现主要是因为加载的 js 过大而引起的。因此本文将主要讲解Vue项目打包后js、css、svg等文件过大的解决办法。
通过引入 compression-webpack-plugin 插件来打包,然后开启 nginx gzip 来解决问题
配置 compression-webpack-plugin 前后打包对比,我们查看 dist目录,能够发现大于10KB的 js , css 等文件已经被压缩了
webpack 如何配置 CSS抽取 和 打包压缩
我们一般打包, webpack 会自动把 css 打包到 js 文件中去。 css 抽取 就是是把 css 抽取出来,生成 css 文件单独打包,然后在进行压缩。
接下来,我详细介绍下 css 是如何抽取 和 压缩的!