Vueプロジェクトの最適化とパッケージ化の詳細な説明

{
    パス: '/login',
    コンポーネント: () => import('@/views/login/index'),
    非表示: true
  },
コードをコピー

コンポーネント = () => import(/* webpackChunkName:"login"*/ "../component/Login.vue")
コードをコピー

Webpack を構成する: {
  //シングルページアプリケーションのタイトルを設定します。ページ名: name,
  外部: {
     /**
      * 外部オブジェクト属性の解析。
      * 基本フォーマット:
      * 「パッケージ名」: 「プロジェクトで導入された名前」
      *  
    */
    'vue': 'vue',
    '要素-ui': 'ElementUI',
    'xlsx': 'XLSX'
  },
  解決する： {
    エイリアス: {
      '@': 解決('src')
    }
  }
}
コードをコピー

外部を {} にします
cdn = { css: [], js: [] } とします。
const isProduction = process.env.NODE_ENV === 'production' // 本番環境かどうかを判定する if (isProduction) {
  外部 = {
      /**
      * 外部オブジェクト属性分析:
      * 「パッケージ名」: 「プロジェクトで導入された名前」
    */
      'vue': 'vue',
      '要素-ui': '要素',
      'xlsx': 'XLSX'
  }
  cdn = {
    css: [
      'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css スタイルシート],
    js: [
      // 最初に vue が必要です。
      'https://unpkg.com/[email protected]/dist/vue.js', // vuejs
      'https://unpkg.com/element-ui/lib/index.js', // 要素 UI js
      'https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js', // xlsx
    ]
  }
}
コードをコピー

Webpack を構成する: {
  //シングルページアプリケーションのタイトルを設定します。ページ名: name,
  外部: 外部、
  解決する： {
    エイリアス: {
      '@': 解決('src')
    }
  }
}
コードをコピー

チェーンWebpack(config) {
  config.plugin('preload').tap(() => [
    {
      rel: 'プリロード',
      ファイルブラックリスト: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
      含める: '初期'
    }
  ])
  //cdn 変数を挿入します (パッケージ化時に実行されます)
  config.plugin('html').tap(args => {
    args[0].cdn = cdn // プラグインにcdnを設定する argsを返す
  })
  // 残りは省略します...
}
コードをコピー

<ヘッド>
    <メタ文字セット="utf-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1、最大スケール=1、ユーザースケーラブル=いいえ">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
      <!-- スタイルをインポート -->
      <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
        <link rel="スタイルシート" href="<%=css%>">
        <% } %>

    <!-- JS をインポート -->
    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%=js%>"></script>
    <% } %>
  </head>
コードをコピー

チェーンWebpack(config) {
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true
      引数を返す
    })
}