如何优化自己的html项目,【webpack篇】工程化里，如何优化自己的项目

写在前面

因为业务关系，涉及到的新老业务较多。因此接触过webpack早期与后期的阶段。

以及vue-cli2、3、4

我们现在已经在使用vue-cli4了

老生常谈的几个优化操作

Dll

剥离公用资源

如何使用(vue-li3、4)的小伙伴可以看以下

先将dll配置文件写好

webpack.dll.config.js

const path = require('path');

const webpack = require('webpack');

const CopyWebpackPlugin = require('copy-webpack-plugin');

const utils = require('../config/utils');

const packageSysName = require('../package.json').name;

// 这个操作是获取name,打包的时候植入自己的对应的系统 可删除

const sysName = utils.getSystemName(packageSysName);

// 这个操作是获取name,打包的时候植入自己的对应的系统 可删除

const resolve = dir => path.join(__dirname, '..', dir);

module.exports = {

entry: {

vue: ['vue', 'vuex', 'vue-router', 'axios'],

ec: ['echarts'],

utils: ['moment'],

ui: ['element-ui']

},

// devtool:'source-map',

output: {

path: path.join(__dirname, '..', 'public/vendor'),

filename: '[name].dll.js',

library: '[name]_[hash]'

},

plugins: [

new webpack.DllPlugin({

path: path.join(__dirname, '..', 'public/vendor', '[name]-manifest.json'),

name: '[name]_[hash]',

context: process.cwd()

}),

new CopyWebpackPlugin([{

from: resolve('./public/vendor'),

to: resolve(`./dist/resources/${sysName}/assets/vendor`),

toType: 'dir'

}])

],

resolve: {

alias: {

vue$: 'vue/dist/vue.esm.js'

}

}

};

引入此配置文件于vue.config.js中(vue-cli3、4)

dllEntry.forEach(dll => {

result.push(`resources/${sysName}/assets/vendor/${dll}.dll.js`)

});

if (IS_PROD) {

Object.keys(externalsMaps.map).forEach(exter => {

const {

name,

version

} = externalsMaps.map[exter];

result.push(`${name}/v${version}/${name}.js`);

result.push(`${name}/v${version}/${name}.css`);

});

}

return result;

最后使用 html-webpack-tags-plugin 此插件

对其生成的文件在编译过程中自动插入html文件中

静态资源的处理

将css资源单独打包

以下提供案例是webpack 4.39.2的

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

new MiniCssExtractPlugin({

// Options similar to the same options in webpackOptions.output

// all options are optional

filename: `${name}.css`,

chunkFilename: '[name].chunk.css'

});

//loader部分

{

test: /\.scss$/,

use: [{

loader: MiniCssExtractPlugin.loader,

options: {

hmr: process.env.NODE_ENV === 'development'

}

},

'css-loader',

'postcss-loader',

'sass-loader'

]

}

img

图片文件我们分为几个策略

一般的icon以及小文件，使用svg-sprite的模式进行打包。svg可以改变颜色，这在icon里是十分好用的，因为icon大多都有不同的状态。

以下提供案例依旧是vue-cli4的

config.module

.rule("images")

.test(/\.(svg|png|jpe?g|gif|webp)(\?.*)?$/)

.exclude

.add(resolve('src/assets/image/icons'))

.add(resolve('src/components/menu/icon'))

.add(resolve('src/assets/image/crmMonitor/process'))

.end()

.use('url-loader')

.tap(options => merge(options, {

limit: 8192, //限制图片大小，小的图片将转化为base64

fallback: {

loader: 'file-loader',

options: {

name: IS_PROD ? `${staticResource}/img/[name].[ext]` : `img/[name].[ext]`

}

}

}));

config.module

.rule('svg-sprite-loader')

.test(/\.svg$/)

.include

.add(resolve('src/assets/image/icons')) //处理svg目录

.add(resolve('src/components/menu/icon'))

.add(resolve('src/assets/image/crmMonitor/process'))

.end()

.use('svg-sprite-loader')

.loader('svg-sprite-loader')

.options({

symbolId: 'icon-[name]'

});

externals

大部分会使用cdn。但是因为我手下的项目都是局域网项目：)

但也难不倒我这样的小天才

因为我在部门内开发了前端类用库。而这部分的库有很多版本迭代以及多人使用。且部分组件是应该按需加载的。

我将其打包到服务器上后，提供了地址(并在其中打上版本号)，并用nginx将其拦截转发。

于是此时，我的fake cdn就出现了。

结合dll，与prefetch,preload(什么是prefetch、preload，争取下一篇提及一下。好东西。)可以按需加载。

具体代码下一章来吧～～～

eslint、 gzip、mock(hmr)

eslint

短话短说，语法检查，组内使用的是airbnb的语法。

如何配置？

根目录下=》 .eslintrc.js

参考配置

gzip

直接上vue-cli3、4的代码

config.plugin('compress').use(CompressionWebpackPlugin, [{

algorithm: 'gzip',

test: new RegExp(`\\.(${productionGzipExtensions.join('|')})$`),

threshold: 10240,

minRatio: 0.8,

}])

也可以使用uglifyjs-webpack-plugin

mock

我们使用过express的中间件转发，也使用过webpack-middle-proxy，以及mock.js

但是都不满足我们的需求，首先他要先满足能够hmr(热更新)，最好能直接读取json，懒

后来我们选用了mocker-api,比较合适于resetful的接口模式

废话

其实工程化我使用过gulp、webpack两个脚手架。

gulp是比较简单易上手的，所以简单的项目，比如只是简单gzip后使用的js，就会使用gulp。他的pipe链条模式印象深刻。webpackChain有点这个意思。

下一篇会详细说下自己写loader plugin的时候遇到的问题