9102年:从0开始手写一个Vue.js优化版脚手架

栏目: JavaScript · 发布时间: 5年前

内容简介:前言:在看本文前,建议你看下,下面这两篇文章 顺便给个赞和正式开始吧,假设你已经懂什么是

9102年:从0开始手写一个Vue.js优化版脚手架

前言:在看本文前,建议你看下,下面这两篇文章 顺便给个赞和 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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

程序设计抽象思想

程序设计抽象思想

Eric S.Roberts、闪四清 / 闪四清 / 清华大学出版社 / 2005-6 / 78.00元

本书全面介绍了数据结构的基础内容。介绍了多个库包,可用于简化编程流程;详细讨论了递归编程的用法,包括大量难度各异的编程示例和练习。一起来看看 《程序设计抽象思想》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

html转js在线工具
html转js在线工具

html转js在线工具