9102年：从0开始手写一个Vue.js优化版脚手架
前言:在看本文前，建议你看下，下面这两篇文章 顺便给个赞和
github的赞哦~javascript
-
若是你对
webpack不是很了解，请你关注我以前的文章，都是百星以上star的高质量文css文章内容都会不按期更新 记得必定要收藏webpack用了会上瘾，它也是突破你技术瓶颈的好方向，如今基本上任何东西都离不开webpack,webpack用得好，什么next nuxt随便上手（本人体会很深），本人参考了Vue脚手架，京东的webpack优化方案，以及本人的其余方面优化，着重在生产模式下的构建速度优化提高很是明显（固然开发环境下也是~），性能提高很明显哦~- 本配置完成功能：
- 识别
.Vue文件和template模板 tree shaking摇树优化 删除掉无用代码- 识别
async / await和 箭头函数 PWA功能，热刷新，安装后当即接管浏览器 离线后仍让能够访问网站 还能够在手机上添加网站到桌面使用preload预加载资源prefetch按需请求资源CSS模块化，不怕命名冲突- 小图片的
base64处理 - 文件后缀省掉j
sx js json等 - 实现
VueRouter路由懒加载，按需加载 ， 代码分割 指定多个路由同个chunkName而且打包到同个chunk中 实现代码精确分割 - 支持
less sass stylus等预处理 code spliting优化首屏加载时间 不让一个文件体积过大- 提取公共代码，打包成一个chunk
- 每一个chunk有对应的
chunkhash,每一个文件有对应的contenthash,方便浏览器区别缓存 - 图片压缩
CSS压缩- 增长
CSS前缀 兼容各类浏览器 - 对于各类不一样文件打包输出指定文件夹下
- 缓存babel的编译结果，加快编译速度
- 每一个入口文件，对应一个chunk，打包出来后对应一个文件 也是
code spliting - 删除HTML文件的注释等无用内容
- 每次编译删除旧的打包代码
- 将
CSS文件单独抽取出来 - 让babel不只缓存编译结果，还在第一次编译后开启多线程编译，极大加快构建速度
性能优化没有尽头，本人仅表达本身目前掌握的知识点，士别三日，另眼相看：每隔三天，技术就会进步一次
正式开始吧，假设你已经懂什么是
entry output loader plugin，若是不懂，看我上面的文章哦~html
webpack常见配置
// 入口文件
entry: {
app: './src/js/index.js',
},
// 输出文件
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/' //确保文件资源可以在 http://localhost:3000 下正确访问
},
// 开发者工具 source-map
devtool: 'inline-source-map',
// 建立开发者服务器
devServer: {
contentBase: './dist',
hot: true // 热更新
},
plugins: [
// 删除dist目录
new CleanWebpackPlugin(['dist']),
// 从新穿件html文件
new HtmlWebpackPlugin({
title: 'Output Management'
}),
// 以便更容易查看要修补(patch)的依赖
new webpack.NamedModulesPlugin(),
// 热更新模块
new webpack.HotModuleReplacementPlugin()
],
// 环境
mode: "development",
// loader配置
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
}
复制代码
这里面咱们重点关注
module和plugins属性，由于今天的重点是编写loader和plugin，须要配置这两个属性。vue
-
webpack启动后，在读取配置的过程当中会先执行new MyPlugin(options)初始化一个MyPlugin得到其实例。在初始化compiler对象后，再调用myPlugin.apply(compiler)给插件实例传入compiler对象。 插件实例在获取到compiler对象后，就能够经过compiler.plugin(事件名称, 回调函数) 监听到Webpack广播出来的事件。 而且能够经过 compiler 对象去操做 webpack。java -
Compiler对象包含了Webpack环境全部的的配置信息，包含options，loaders，plugins这些信息，这个对象在Webpack启动时候被实例化，它是全局惟一的，能够简单地把它理解为Webpack实例；webpack -
Compilation对象包含了当前的模块资源、编译生成资源、变化的文件等。当 Webpack 以开发模式运行时，每当检测到一个文件变化，一次新的Compilation将被建立。Compilation对象也提供了不少事件回调供插件作扩展。经过Compilation也能读取到Compiler` 对象。git -
Compiler 和 Compilation的区别在于：es6 -
Compiler表明了整个Webpack从启动到关闭的生命周期，而Compilation只是表明了一次新的编译。github -
事件流web
-
webpack经过Tapable来组织这条复杂的生产线。 -
webpack的事件流机制保证了插件的有序性，使得整个系统扩展性很好。 -
webpack的事件流机制应用了观察者模式，和Node.js 中的 EventEmitter很是类似。
1.2 打包原理
-
识别入口文件
-
经过逐层识别模块依赖。（
Commonjs、amd或者es6的import，webpack都会对其进行分析。来获取代码的依赖） -
webpack作的就是分析代码。转换代码，编译代码，输出代码 -
最终造成打包后的代码
-
这些都是
webpack的一些基础知识，对于理解webpack的工做机制颇有帮助。
脚手架通常都是遵循了commonjs模块化方案，若是你不是很懂，那么看起来很费劲，我写的脚手架，就不使用模块化方案了，简单粗暴
-
开始开发环境配置
-
包管理器 使用
yarn不解释 就用yarn -
配置
webpack.dev.js开发模式下的配置 -
yarn init -y -
yarn add webpack webpack-cli(yarn会自动添加依赖是线上依赖仍是开发环境的依赖)
配置入口
entry: path.resolve(__dirname, '../src/main.js')}
复制代码
配置输出目录
output: {
filename: 'js/[name].[hash:5].js',
path: path.resolve(__dirname, '../dist'),
},
复制代码
引入Vue脚手架里基本配置的loader ，后面的loader都是往rules数组里加就好了~
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000,
name: 'img/[name]-[hash:5].[ext]',
}
}
]
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name]-[hash:5].[ext]',
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 4096,
name: 'media/[name]-[hash:5].[ext]',
}
}
]
}
]
},
复制代码
有人会问 这么多我怎么看啊 别急 第一个
url-loader是处理base64图片的，让低于limit大小的文件以base64形式使用，后面两个同样的套路，只是换了文件类型而已 ，不会的话，先复制过去跑一把？
配置识别.vue文件和tempalte模板 , yarn add vue vue-loader vue-template-compiler
加入loader
{
test:/\.vue$/,
loader:"vue-loader"
}
加入plugin
const vueplugin = require('vue-loader/lib/plugin')
在webpack的plugin中
new vueplugin()便可
复制代码
入口指定babel-polifill ,vendor代码分割公共模块，打包后这些代码都会在一个公共模块
app: ['babel-polyfill', './src/index.js', './src/pages/home/index.js', './src/pages/home/categorys/index.jsx'],
vendor: ['vuex', 'better-scroll', 'mint-ui', 'element-ui']
```
#### 指定 `html`文件为模板打包输出，自动引入打包后的`js`文件
复制代码
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname,'../index.html'), filename: 'index.html' }), ]
#### 省掉`.vue`的后缀 ,直接配置在`module.exports`对象中,跟`entry`同级
复制代码
resolve: { extensions: ['.js','.json','.vue'],
}
复制代码
#### 加入识别`html`文件的`loader`
复制代码
{
test: /\.(html)$/,
loader: 'html-loader'
}
```
复制代码
开启多线程编译
const os = require('os')
{
loader: 'thread-loader',
options: {
workers: os.cpus().length
}
}
复制代码
加入babel-loader 加入 babel-loader 还有 解析JSX ES6语法的 babel preset
@babel/preset-env解析es6语法
@babel/plugin-syntax-dynamic-import解析vue的 import按需加载，附带code spliting功能
{
test: /\.(js|jsx)$/,
use:
{
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env", { "modules": false }] ,//附带`tree shaking`
plugins: ["@babel/plugin-syntax-dynamic-import"]
},
cacheDirectory: true//开启babel编译缓存
}
},
复制代码
在使用上面的babel配置后 咱们躺着就能够用vueRouter的路由懒加载了
路由懒加载
-
当打包构建应用时，JavaScript 包会变得很是大，影响页面加载。若是咱们能把不一样路由对应的组件分割成不一样的代码块，而后当路由被访问的时候才加载对应组件，这样就更加高效了。
-
结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。
-
首先，能够将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件自己)：
-
const Foo = () => Promise.resolve({ /* 组件定义对象 */ })
-
第二，在 Webpack 中，咱们可使用动态 import语法来定义代码分块点 (split point)：
import('./Foo.vue') // 返回 Promise
注意
-
若是您使用的是 Babel，你将须要添加 syntax-dynamic-import 插件，才能使 Babel 能够正确地解析语法。
-
结合这二者，这就是如何定义一个可以被 Webpack 自动代码分割的异步组件。
const Foo = () => import('./Foo.vue')
在路由配置中什么都不须要改变，只须要像往常同样使用 Foo：
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo }
]
})
# 把组件按组分块
有时候咱们想把某个路由下的全部组件都打包在同个异步块 (chunk) 中。只须要使用 命名 chunk，一个特殊的注释语法来提供 chunk name (须要 Webpack > 2.4)。
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。
复制代码
加入插件 热更新plugin和html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new webpack.HotModuleReplacementPlugin(),
devServer: {
contentBase: '../build',
open: true,
port: 5000,
hot: true
},
复制代码
加入less-css识别的模块
{
test: /\.(less|css)$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader'
, options: {
modules: false, //不建议开启css模块化，某些ui组件库可能会按需加载失败
localIdentName: '[local]--[hash:base64:5]'
}
},
{
loader: 'less-loader',
options: { javascriptEnabled: true }
}
]
},
```
>下面正式开始生产环境
### 踩坑是好事 为何此次不放完整的源码 由于不去踩坑 永远提高不了技术
#### `html`杀掉无效的代码
复制代码
new HtmlWebpackPlugin({ template: './src/index.html', minify: { removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true, useShortDoctype: true, removeEmptyAttributes: true, removeStyleLinkTypeAttributes: true, keepClosingSlash: true, minifyJS: true, minifyCSS: true, minifyURLs: true, } }),
#### 加入图片压缩 性能优化很大
复制代码
{ test: /.(jpg|jpeg|bmp|svg|png|webp|gif)$/,
use:[
{loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[name].[hash:8].[ext]',
outputPath:'/img'
}},
{
loader: 'img-loader',
options: {
plugins: [
require('imagemin-gifsicle')({
interlaced: false
}),
require('imagemin-mozjpeg')({
progressive: true,
arithmetic: false
}),
require('imagemin-pngquant')({
floyd: 0.5,
speed: 2
}),
require('imagemin-svgo')({
plugins: [
{ removeTitle: true },
{ convertPathData: false }
]
})
]
}
}
]
}
```
复制代码
加入file-loader 把一些文件打包输出到固定的目录下
{
exclude: /\.(js|json|less|css|jsx)$/,
loader: 'file-loader',
options: {
outputPath: 'media/',
name: '[name].[contenthash:8].[ext]'
}
}
复制代码
加入压缩css的插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
new OptimizeCssAssetsWebpackPlugin({
cssProcessPluginOptions:{
preset:['default',{discardComments: {removeAll:true} }]
}
}),
复制代码
加入code spliting代码分割 vue脚手架是同步异步分开割，我是直接一块儿割
optimization: {
runtimeChunk:true, //设置为 true, 一个chunk打包后就是一个文件，一个chunk对应`一些js css 图片`等
splitChunks: {
chunks: 'all' // 默认 entry 的 chunk 不会被拆分, 配置成 all, 就能够了拆分了，一个入口`JS`，
//打包后就生成一个单独的文件
}
}
复制代码
加入 WorkboxPlugin ， PWA的插件
pwa这个技术其实要想真正用好，仍是须要下点功夫，它有它的生命周期，以及它在浏览器中热更新带来的反作用等，须要认真研究。能够参考百度的lavas框架发展历史~
const WorkboxPlugin = require('workbox-webpack-plugin')
new WorkboxPlugin.GenerateSW({
clientsClaim: true, //让浏览器当即servece worker被接管
skipWaiting: true, // 更新sw文件后，当即插队到最前面
importWorkboxFrom: 'local',
include: [/\.js$/, /\.css$/, /\.html$/,/\.jpg/,/\.jpeg/,/\.svg/,/\.webp/,/\.png/],
}),
```
#### 单页面应用的优化核心 ：
* 最重要的是路由懒加载 代码分割
* 部分渲染在服务端完成 极大加快首屏渲染速度 `VUE`首选`nuxt`框架，也可使用它的脚手架
* 图片压缩和图片懒加载是对页面层次最大的优化之一
* 后面继续书写`next nuxt`和`pwa`的使用~
> 脚手架的搭建过程不少坑，可是却能大大提高你的技术天花板，跟着做者一块儿踩坑吧，别忘了来个人`github`点赞哦~ [仓库源码地址~欢迎star][4]
[1]: /img/bVbsKJj
[2]: https://segmentfault.com/a/1190000019126657
[3]: https://segmentfault.com/a/1190000018827395
[4]: https://github.com/JinJieTan/React-webpack复制代码
- 1. 9102年：手写一个Vue的脚手架 【极致优化版】
- 2. 9102年：手写一个React脚手架 【优化极致版】
- 3. 从零开始手写一个优化版React脚手架
- 4. 9102年：手写一个Vue的脚手架
- 5. 从 0 开始手写一个Tomcat
- 6. 从0开始手写一个 SpringMVC 框架，向高手进阶！
- 7. 从零开始搭建一个vue.js的脚手架
- 8. ## **从0开始搭建一个vue.js脚手架过程中的常见问题**
- 9. 从 0 开始手写一个 Mybatis 框架，三步搞定！
- 10. 从 0 开始手写一个 Mybatis 框架
- 更多相关文章...
- • XQuery 参考手册 - XQuery 教程
- • RSS 参考手册 - RSS 教程
- • PHP开发工具
- • 算法总结-广度优先算法
-
每一个你不满意的现在，都有一个你没有努力的曾经。