JZTXT

第三方依赖包按需引入和打包配置

发布时间 2023-04-25 09:06:18作者: 混名汪小星

 

lodash

通过babel-import-plugin按需引入lodash。

babel.config.js


module.exports = {
  plugins: [
        ...,
    ['import', {libraryName: 'lodash', libraryDirectory: ''}, 'lodash'],
    ['import', {libraryName: 'echarts'}, 'echarts']
    ],
}
 
// import _ from 'lodash'
//修改为
import {extend} from 'lodash'
搜索全部_.extend方法，并替换成extend方法，示例如下：
// _.extend(initData, initParamObj)
// _.extend(initData, data)
//替换成：
extend(initData, initParamObj)
extend(initData, data)

moment

moment 进行按需引入。

vue.config.js

const webpack = require('webpack')
module.exports = {
  // ...
  configureWebpack: config => {
    // 忽略 moment.js的所有本地文件
    config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
  }
}
// 时间组件中英显示 -- 在本项目中的main.js文件 加上
import "moment/locale/zh-cn"

echarts

echarts进行按需引入。

新增文件路径：

/src/plugins/echarts.js

import * as echarts from 'echarts/core'
import {
  BarChart,
  LineChart,
  PieChart,
  RadarChart,
  GaugeChart,
  PictorialBarChart,
  ScatterChart,
  MapChart
} from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GeoComponent,
  GridComponent,
  DatasetComponent,
  DataZoomComponent,
  TransformComponent,
  VisualMapComponent,
  MarkLineComponent,
  MarkPointComponent,
  GraphicComponent
} from 'echarts/components'
import {LabelLayout, UniversalTransition} from 'echarts/features'
import {CanvasRenderer} from 'echarts/renderers'

// 注册必须的组件
echarts.use([
  BarChart,
  LineChart,
  PieChart,
  RadarChart,
  GaugeChart,
  PictorialBarChart,
  ScatterChart,
  MapChart,

  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GeoComponent,
  GridComponent,
  DatasetComponent,
  DataZoomComponent,
  TransformComponent,
  VisualMapComponent,
  MarkLineComponent,
  MarkPointComponent,
  GraphicComponent,

  LabelLayout,
  UniversalTransition,
  CanvasRenderer
])
export default echarts

修改文件路径：

babel.config.js

module.exports = {
  plugins: [
    ...,
    ['import', {libraryName: 'echarts'}, 'echarts']
    ],
}

/src/main.js

import echarts from './plugins/echarts.js'
Vue.prototype.$echarts = echarts

echarts 做成按需引入的，把main.js中$echarts的方法注释掉

// import * as echarts from 'echarts'
 
import {echarts} from '@/plugins/echarts.js'

UglifyJsPlugin

UglifyJsPlugin 进行压缩代码。

1
npm i uglifyjs-webpack-plugin -D

vue.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
  // ...
  configureWebpack: config => {
    // 忽略 moment.js的所有本地文件
    plugins.push(
      new UglifyJsPlugin({
        uglifyOptions: {
          output: {
            comments: false // 去掉注释
          },
          warnings: false,
          compress: {
            drop_console: true,
            drop_debugger: false,
            pure_funcs: ['console.log'] //移除console
          }
        }
      })
    )
  }
}

 

package.json文件中删除：

  "prerender-spa-plugin": "3.4.0",
    puppeteer": "^18.2.1",

其他：

ant-design-vue

通过babel-import-plugin按需引入ant-design-vue。

实际上当前项目，如果大量使用ant-design-vue相关组件的话，这种情况下可以不做按需引入。