background

There is a local configuration file in the project:

// src/image-position.js
export default {
    label: 'home'.value: 'home'.data: [{label: '轮播'.value: 'carousel'}}]Copy the code

We all know how to reference a local file:

import ImagePosition from './image-position.js'
Copy the code

Now you need to drop the image-position.js file onto the server and get a link to it:

Xxx.com/static/imag…

At this point you directly reference the file address of course is not feasible.

import ImagePosition from 'https://xxx.com/static/image-position.js'

// ERROR This dependency was not found
Copy the code

implementation

  1. First, make a small change to image-position.js to expose a global object ImagePosition
// Image-position.js after transformation

(function (global, factory) {
  typeof exports= = ='object' && typeof module! = ='undefined' 
    ? module.exports = factory() 
    : typeof define === 'function' && define.amd 
    ? define(factory) 
    : (global = global || self, global.ImagePosition = factory()); } (this, (function () {
  'use strict';
  
  return {
    label: 'home'.value: 'home'.data: [{label: '轮播'.value: 'carousel'}}; })));Copy the code
  1. Add externals to vue.config.js.
module.exports = {
  configureWebpack: config= > {
    config.externals = {
      'image-position': 'ImagePosition'}}}Copy the code
  1. Index.html is context-sensitive and introduces JS files.
// public/index.html
<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
    <! -- built files will be auto injected -->
    <% if (NODE_ENV == 'production') { %>
      <script src="http://xxx.com/static/image-position.js"></script>
    <% } else { %>
      <script src="http://test.xxx.com/static/image-position.js"></script>The < %} % ></body>
</html>
Copy the code
  1. You can happily reference the image-position.js file after the above steps.
import ImagePosition from 'image-position'
console.log(ImagePosition)
/ / {value: label: 'front page', 'home', data: [{label: 'shuffling, value:' carousel}]}
Copy the code

How do I configure vuE-CLI2.0

// build/webpack.base.conf.js
module.exports = {
  externals: {
    / / new
    'image-position': 'ImagePosition'}}Copy the code
// index.html
<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
    <! -- built files will be auto injected -->
    <% if (process.env == 'production') { %>
      <script src="http://xxx.com/static/image-position.js"></script>
    <% } else { %>
      <script src="http://test.xxx.com/static/image-position.js"></script>The < %} % ></body>
</html>
Copy the code

conclusion

In the packaging volume optimization of Vue projects, CDN acceleration is a commonly used method. The above is actually the implementation content of CDN acceleration. The third-party library is introduced through script tag, which greatly reduces the size of packaged Vendor.js file.

When we want to put local files on the server remote, the key is to implement the first step of the step, the rest of the content is the same as configuring the CDN acceleration process.

The last

Code word is not easy, if this article is useful to you, welcome to like! 👍