9102年:从0开始手写一个Vue.js优化版脚手架
栏目: JavaScript · 发布时间: 5年前
内容简介:前言:在看本文前,建议你看下,下面这两篇文章 顺便给个赞和正式开始吧,假设你已经懂什么是
前言:在看本文前,建议你看下,下面这两篇文章 顺便给个赞和 github
的赞哦~
如果你对 webpack
不是很了解,请你关注我之前的文章,都是百星以上 star
的高质量文
9102年:手写一个React完美版移动端脚手架
前端性能优化不完全手册
欢迎你关注我的 《前端进阶》
专栏 一起突破学习
文章内容都会不定期更新 记得一定要收藏
webpack
用了会上瘾,它也是突破你技术瓶颈的好方向,现在基本上任何东西都离不开 webpack
, webpack
用得好,什么 next nuxt
随便上手(本人体会很深),本人参考了 Vue
脚手架,京东的 webpack
优化方案,以及本人的其他方面优化,着重在 生产模式
下的构建速度优化提升非常明显(当然开发环境下也是~),性能提升很明显哦~
性能优化没有尽头,本人仅表达自己目前掌握的知识点,士别三日,刮目相看: 每隔三天,技术就会进步一次
正式开始吧,假设你已经懂什么是 entry output loader plugin
,如果不懂,看我上面的文章哦~
脚手架一般都是遵循了 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.jsx', './src/pages/home/categorys/index.jsx'], vendor: ['react', 'better-scroll', 'react-redux', 'react-lazyload']
指定 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编译缓存 } },
加入插件 热更新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 }, 作者:茉莉灬纯洁的白 链接:https://juejin.im/post/5cdad9fcf265da038364e784 来源:掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
加入 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/], }),
脚手架的搭建过程很多坑,但是却能大大提升你的技术天花板,跟着作者一起踩坑吧,别忘了来我的 github
点赞哦~ 仓库源码地址~欢迎star
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 手写webpack脚手架命令行工具
- 从零开始手写一个优化版的React脚手架Webpack最新版配置
- Next.js 脚手架进阶 —— 扩展为全栈脚手架
- 前后端分离脚手架
- 脚手架的开发总结
- Angular脚手架开发
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
程序设计抽象思想
Eric S.Roberts、闪四清 / 闪四清 / 清华大学出版社 / 2005-6 / 78.00元
本书全面介绍了数据结构的基础内容。介绍了多个库包,可用于简化编程流程;详细讨论了递归编程的用法,包括大量难度各异的编程示例和练习。一起来看看 《程序设计抽象思想》 这本书的介绍吧!