江苏龙网

  1. 主页 > 生活百科 > >

开箱即用 vue全家桶+vant移动端解决方案( 五 )

vue全家桶+vant

? 配置 打包分析const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPluginmodule.exports = {  chainWebpack: config => {    // 打包分析    if (IS_PROD) {      config.plugin('webpack-report').use(BundleAnalyzerPlugin, [        {          analyzerMode: 'static'        }      ])    }  }}npm run build? 配置 externals 引入 cdn 资源这个版本 CDN 不再引入，我测试了一下使用引入 CDN 和不使用,不使用会比使用时间少 。网上不少文章测试 CDN 速度快，这个开发者可 以实际测试一下 。
另外项目中使用的是公共 CDN 不稳定，域名解析也是需要时间的（如果你要使用请尽量使用同一个域名）
因为页面每次遇到<script>标签都会停下来解析执行，所以应该尽可能减少<script>标签的数量 HTTP请求存在一定的开销，100K 的文件比 5 个 20K 的文件下载的更快，所以较少脚本数量也是很有必要的
暂时还没有研究放到自己的 cdn 服务器上 。
const defaultSettings = require('./src/config/index.js')const name = defaultSettings.title || 'vue mobile template'const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)// externalsconst externals = {  vue: 'Vue',  'vue-router': 'VueRouter',  vuex: 'Vuex',  vant: 'vant',  axios: 'axios'}// CDN外链，会插入到index.html中const cdn = {  // 开发环境  dev: {    css: [],    js: []  },  // 生产环境  build: {    css: ['https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.css'],    js: [      'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',      'https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js',      'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',      'https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js',      'https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.min.js'    ]  }}module.exports = {  configureWebpack: config => {    config.name = name    // 为生产环境修改配置...    if (IS_PROD) {      // externals      config.externals = externals    }  },  chainWebpack: config => {    /**     * 添加CDN参数到htmlWebpackPlugin配置中     */    config.plugin('html').tap(args => {      if (IS_PROD) {        args[0].cdn = cdn.build      } else {        args[0].cdn = cdn.dev      }      return args    })  }}在 public/index.html 中添加
    <!-- 使用CDN的CSS文件 -->    <% for (var i in      htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>      <link href=https://www.isolves.com/it/cxkf/bk/2020-08-04/"" rel="preload" as="style" /> ? 去掉 console.log保留了测试环境和本地环境的 console.log
npm i -D babel-plugin-transform-remove-console在 babel.config.js 中配置
// 获取 VUE_APP_ENV 非 NODE_ENV，测试环境依然 consoleconst IS_PROD = ['production', 'prod'].includes(process.env.VUE_APP_ENV)const plugins = [  [    'import',    {      libraryName: 'vant',      libraryDirectory: 'es',      style: true    },    'vant'  ]]// 去除 console.logif (IS_PROD) {  plugins.push('transform-remove-console')}module.exports = {  presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry'}]],  plugins}


推荐阅读


上一篇：细思极恐的诡异经历 诡异的事情发生了

下一篇：标贝科技入选“2020人工智能语义识别创新排行”